Question

我正在使用DataTables创建可选择的电话号码列表，我的功能如下：

function search(areacode) {
    areacode = typeof areacode !== 'undefined' ? areacode : 239;
      $("#did_search").fadeIn();    
      var table = $('#example').DataTable( {
            "bDestroy": true,
            "ajax": "/Portal/manage/search_bulkvs/" + areacode,
            "columns": [
                { "data": "did" },
                { "data": "city" },
                { "data": "state" },
                { "data": "action" },
            ],
            "columnDefs": [
            { "visible": false, "targets": 3 }
          ]
        } );

    $('#example tbody').on( 'click', 'tr', function () {
        var row_object = table.row( this ).data();
        $("label[for = did_label]").text(row_object.action);
        $('input[name="did"]').val(row_object.action);
    } );

}

函数的结尾$（＆＃39; #example tbody＆＃39;） - 允许我从表中选择我需要的数据，并设置我的标签/输入的值以进行表单处理。但是，在我第二次运行此功能后，我无法再选择此数据。

我的调试导致了这个错误：Uncaught TypeError：无法读取属性＆＃39; action＆＃39;未定义的

我认为每次运行该函数时都会定义row_object，但看起来它不是。

有没有人对如何在函数运行多次后从表中检索此数据有任何建议？

Answer 1

由于你使用的是ajax，你需要使用DataTables.fnDrawCallback在每次绘制时绑定你的点击对象，如下所示：

function search(areacode) {
    areacode = typeof areacode !== 'undefined' ? areacode : 239;
      $("#did_search").fadeIn();    
      var table = $('#example').DataTable( {
            "bDestroy": true,
            "ajax": "/Portal/manage/search_bulkvs/" + areacode,
            "columns": [
                { "data": "did" },
                { "data": "city" },
                { "data": "state" },
                { "data": "action" },
            ],
            "columnDefs": [
            { "visible": false, "targets": 3 }
            ],

            "fnDrawCallback": function(){
                $("tbody tr td",$(this)).click(function(e){

                    .... Your click code here ....

                });
            }

        } );
}

Answer 2

如果ajax调用替换了表的tbody元素，则需要将委派的事件处理程序附加到不变的祖先（例如$('#example').on甚至$('#example').parent().on(。

如果多次调用搜索（或者在开启之前调用），您还希望避免重复设置处理程序。

e.g。

$('#example tbody').off('click').on( 'click', 'tr', function () {
    var row_object = table.row( this ).data();
    $("label[for = did_label]").text(row_object.action);
    $('input[name="did"]').val(row_object.action);
} );

Answer 3

this不是undefined。此错误消息

Uncaught TypeError: Cannot read property 'action' of undefined

通常意味着您从undefined对象（此处为row_object）调用函数，或者您调用的函数（action）不在对象上。

是的，变量row_object的定义很好。但我认为你可以console.log看看它是否每次都被正确分配给某个值。

Javascript关键字＆＃34;此＆＃34;变得不确定

3 个答案: