Javascript 关键字 "this"变为未定义

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);
    } );

}

函数的末尾 $('#example tbody') -- 允许我从表中选择我需要的数据，并设置用于表单处理的标签/输入的值。但是，当我第二次运行此函数后，我无法再选择此数据。

我的调试导致了此错误:未捕获类型错误:无法读取未定义的属性“操作”

我以为每次运行该函数时都会定义 row_object，但看起来并非如此。

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

Answer 1

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

如果多次调用搜索(或在打开之前取消)，您还希望避免重复设置处理程序。

例如

$('#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);
} );