1

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

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

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

简而言之，我的 JQuery click 函数没有在通过 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>
4

1 回答 1

6

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这是出于性能原因...

于 2013-10-10T13:53:21.347 回答