Question

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

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

我遇到了上一个问题，并意识到我必须在初始化Datatable之前将数据加载到HTML中，并且所有对JQuery click函数的调用都有效，但这是使用HTML表数据，而不是来自Ajax Source的数据。

简而言之，我的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的传统事件处理不适用于动态添加的内容。您应该使用delegated events。而不是：

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

你应该这样做：

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

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

数据表 - 对于通过Ajax Source / Ajax Reload加载到表中的按钮，不调用Jquery click事件

1 个答案: