在输入字段上捕获更改事件，动态添加到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（）{
  

FIDDLE

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() { 

FIDDLE

这篇关于在输入字段上捕获更改事件，动态添加到Jquery Datatables表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！