Datatables—对于通过Ajax源代码/Ajax重新加载加载到表中的按钮，不会调用Jquery单击事件

Question

我已将JQuery和Datatables代码正确加载到页面中。我的数据是从Datatables初始化函数中的sAjaxSource选项加载的。

我正在将按钮加载到具有类和ID的单元格中，这些类和ID应该允许JQuery在单击时触发函数。由于Datatable使用分页，只有第一个页面可以工作，因为我在初始化Datatable后（使用fnInitComplete）将JQuery click函数作为函数调用加载。

我遇到了以前的问题，并意识到我必须在初始化数据包之前将数据加载到超文本标记语言中，所有对JQuery单击函数的调用都有效，但这是使用超文本标记语言表数据，而不是来自Ajax源的数据。

简而言之，我的JQuery单击函数没有在通过AjaxSource加载到表中的元素上运行。（仅供参考，我的单击函数正在尝试将不同的数据重新加载到表中，并且在第一次重新加载后，没有任何单击事件工作，因此我担心我的第二个问题将是让单击事件在此之后运行）。我的代码如下。

<script src="fnReloadAjax.js"></script>
<script>
$(document).ready(function() {

            //Any table related events need to go in here so that it initialises post data load
            function tableInit() {
                $('.myButton').click(function() {
                    oTable.fnReloadAjax('mySource2.php');
                });
            }

            var oTable;
            oTable = $("#taskTable").dataTable({ bSort: true,
                "bProcessing": true,
                "sAjaxSource": 'mySource1.php',
                bAutoWidth: true,
                "iDisplayLength": 5, "aLengthMenu": [5, 10, 25, 50, 100], // can be removed for basic 10 items per page
                "sPaginationType": "full_numbers",
                "aoColumnDefs": [{ "bSortable": false, "aTargets": [-1, 0]}],
                "fnInitComplete": function(oSettings, json) {
                    tableInit();
                }
            });
        });
</script>

Answer 1

Jquery的传统事件处理不适用于动态添加的内容。您应该使用委派事件。与此相反：

function tableInit() 
{
    $('.myButton').click(function() {
            oTable.fnReloadAjax('mySource2.php');
        });
}

你应该这样做：

function tableInit() 
{
    $('anyParentSelector').on('click','.myButton',function() {
        oTable.fnReloadAjax('mySource2.php');
    });
}

注意，我确实放了“anyParentSelector”，它可以是body甚至document，但最佳实践建议它是动态创建的的最直接的静态父对象。myButton元素。这是出于性能原因。。。