troubleshooting Question

How do I create a jQuery .change event handler at runtime?

Avatar of Courts-Tech
Courts-Tech asked on
JavaScriptASP.NET
6 Comments1 Solution628 ViewsLast Modified:
Hello,
I'm very new to MVC, Razor, and jQuery.
I have a dynamically created table where each row includes a dropdownlist.  I need to find out how I can create an .change event handler for each row's dropdownlist that is created.  I have attached 2 snippets of code describing the creation of the table and a jQuery function to handle a .change event.  I need to find out how I can create the .change event handler that will distinguish which dropdown list the event came from OR how to create a .change event handler at runtime.

Also, (as an extra side quesiton), how would I set corresponding fee amount to "Fee Amount" field on the table?

Thanks,

Sergio Valdez
Creation of table
-----------------------

<table width="100%" style="border:1">
	<tr>
		<th style="color: Blue; text-align: center; width: 40%">Fee Description</th>
		<th style="color: Blue; text-align: center; width: 15%">Fee Amount</th>
		<th style="color: Blue; text-align: center; width: 20%">Qty / Hours</th>
		<th style="color: Blue; text-align: center; width: 20%">Extended Total</th>
		<th style="color: Blue; text-align: center; width: 5%">Delete</th>
	</tr>
	@{var ddlNum = 0;}
	@foreach (Travis.Courts.Web.IDEP.App_Code.InvoiceData.InvoiceFeeList iFee in invoiceFeeList)
	{
		<tr>
			<td style="text-align: right; width: 40%">@Html.DropDownList("FeeDescription", iFee.FeeScheduleList, new { id = "FeeDescDDL" + ddlNum.ToString() })</td>
			<td style="text-align: center; width: 15%" id="FeeAmount">$@iFee.InvFee.UnitCost.ToString()</td>
			<td style="text-align: center; width: 20%">@Html.TextBox("Quantity_TimeInHours", iFee.InvFee.Qty_TimeinHours.ToString())</td>
			<td style="text-align: right; width: 20%">$@iFee.InvFee.ExtendedTotal.ToString()</td>
			<td style="text-align: center; width: 5%"><a href="@Url.Action("DeleteFeeItem", "InvoiceEdit", new { invId = Model.InvoiceRecord.InvoiceID, feeId = iFee.InvFee.InvoiceFeeID })" ><img src="../../Content/Images/delete_12x12.png" alt="" style="border:none;" /></a></td>
		</tr>
		ddlNum++;
	}
</table> 


jQuery function
--------------------------------
$(function () {
	$("#FeeDescDDL").change(function () {
		var ddlFeeId = "";
		$("#FeeDescDDL option:selected").each(function () {
			// set corresponding fee ID to invoice fee item
			// set corresponding fee amount to "Fee Amount" field
			ddlFeeId += $(this).val();
		});
	});
});
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 6 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros