更新时间:2023-11-30 22:46:04
question 实际上是错误的。(他更新了答案!)您必须将事件绑定到父元素,因为 $ @ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $
$(document).on('change','.maintCostField',function(){
I have an ajax call that uses the following code to add some rows to a data table for each record in the response:
strAppName = data.Application_Name
maintCost = '<input class="maintCostField" appid="' + data.Application_ID + '" type="text" placeholder="$">';
$('#myReport').dataTable().fnAddData([
strAppName,
maintCost,
etc,
etc
]);
I've tried the following selectors/events to catch changes to the text box, but none of them trigger. They are in the document.ready section...
$(".maintCostField").bind('change',function () {
val = $(this).val();
app = $(this).attr('appid');
alert('Updating app# ' + app + ' with ' + val);
});
$(".maintCostField").on('change',function () {
val = $(this).val();
app = $(this).attr('appid');
alert('Updating app# ' + app + ' with ' + val);
});
(I know this one is deprecated)
$(".maintCostField").live('change',function () {
val = $(this).val();
app = $(this).attr('appid');
alert('Updating app# ' + app + ' with ' + val);
});
and of course this didn't work
$(".maintCostField").change(function () {
val = $(this).val();
app = $(this).attr('appid');
alert('Updating app# ' + app + ' with ' + val);
});
What am I doing wrong? I don't see why it's any different than Click event doesn't work on dynamically generated elements or many others...
update* I added the following to the fnDrawCallback event of the datatable and now it works, only it executes as many times as there are forms on the screen.
$(".maintCostField").each(function () {
this.addEventListener("change", function () {
val = $(this).val();
app = $(this).attr('appid');
alert('Updating app# ' + app + ' with ' + val);
}, true);
});
The answer to that question is actually wrong. (He updated the answer!) You have to bind the event to a parent element because the input
doesn't exist yet in order to bind the event to.
$(document).on('change', '.maintCostField', function() {