在输入字段上捕获更改事件,动态添加到Jquery Datatables表中 [英] Catch change event on input field dynamically added to Jquery Datatables table
问题描述
我有一个ajax调用,使用以下代码为响应中的每个记录向数据表添加一些行:
strAppName = data.Application_Name
maintCost ='< input class =maintCostFieldappid ='+ data.Application_ID +'type =textplaceholder =$>';
$('#myReport')。dataTable()。fnAddData([
strAppName,
maintCost,
etc,
etc
]);
我尝试了以下选择器/事件来捕获文本框的更改,但没有一个触发。他们在document.ready部分...
$(。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('用'+ val更新app#'+ app +');
});
(我知道这一个已被弃用)
$(。maintCostField)。live('change',function(){
val = $(this).val();
app = $(this).attr('appid');
alert('用'+ val更新app#'+ app +');
});
当然这没有工作
< pre $
$(。maintCostField)。change(function(){
val = $(this).val();
app = .attr('appid');
alert('用'+ val更新app#'+ app +');
});
我做错了什么?我不明白为什么与点击事件不同在动态生成的元素或许多其他...上工作...
更新*
我将以下内容添加到fnDrawCallback事件的datatable,现在它的工作原理,只执行与屏幕上的表单一样多次。
$( .maintCostField)。each(function(){
this.addEventListener(change,function(){
val = $(this).val();
app = $ (这个).attr('appid');
alert('用'+ val更新app#'+ app +');
},true);
});
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() {
这篇关于在输入字段上捕获更改事件,动态添加到Jquery Datatables表中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!