Click here to Skip to main content
14,692,047 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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 25-Nov-16 0:22am
v3

1 solution

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, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900