Click here to Skip to main content
14,664,450 members
Rate this:
Please Sign up or sign in to vote.
See more:
Dear Friends,

I need to multiply 2 input box values in grid and shows result in 3rd input box. am using class for keypress event.

It works on grid. but when i add rows and append rows to grid that input box keypress didn't works.

Grid textbox like this: @Html.TextBox("Qty_Req_" + (int)item.Id, (decimal)item.QtyRequested, new {@class="QtyReq", @style = "display:none" }



Thanks & Regards,
Vivek .R
Software Engineer.

What I have tried:

Add row or Append :

var tr = ' <input id="' + Item_Name + '" type="text" class="ItemName ItemNames" /><button id="btnOk" type="button" class="btn btn-primary btn-xs">..</button>' +
' <input id="' + ItemR_Code + '" type="text" class="IRCode" />' +
' <input id="' + Item_Code + '" type="text" class="ItemCode" disabled="disabled"/>' +
' <input id="' + Unit_Price + '" type="text" class="UnitPrice" disabled="disabled"/>' +
' <input id="' + Qty_Req + '" type="text" class="QtyReq" />' +
' <input id="' + Total + '" type="text" class="Total" disabled="disabled" />' +
' Save Cancel' +
'';

$("#grid tbody").append(tr);

javascript:

$('input[class="QtyReq"]').keyup(function () {
       $(this).addClass('selected').siblings().removeClass('selected');
       var unitprice = $(this).closest("tr").find('.UnitPrice');
       var qtyreq = $(this).closest("tr").find('.QtyReq');
       var total = $(this).closest("tr").find('.Total');
       total.val(unitprice.val() * qtyreq.val());

   });
Posted
Updated 24-Nov-16 23:22pm
v3

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

When your code to bind the keyup event is ran it only attaches to the inputs that exist at that time, any inputs you add later will not have the required events attached. The easiest way to get around this is to you "delegated events" via the "on" method as these will also work for items you add later. The link below explains with examples.

.on() | jQuery API Documentation[^]
   
Comments
Vivek.anand34 25-Nov-16 5:46am
   
Ya.. Thank you.. I used like this. its executed....

$("table").delegate(".QtyReq", "keyup", function () {
$(this).addClass('selected').siblings().removeClass('selected');
var unitprice = $(this).closest("tr").find('.UnitPrice');
var qtyreq = $(this).closest("tr").find('.QtyReq');
var total = $(this).closest("tr").find('.Total');
total.val(unitprice.val() * qtyreq.val());
});

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100