在jQuery DataTable中使用on()将点击事件绑定到tr元素上不起作用。

Question

在jQuery DataTable中使用on()将点击事件绑定到tr元素上不起作用。

jquerydatatables

5

我正在开发一张表格，其中包含所有用户的信息，通过单击表格行并编辑打开的表单可以更改这些数据。

如果我在页面加载时加载所有用户，我的代码就能正常工作。

一旦我将数据表更改为在数据表初始化时加载用户，它只能在第一页上工作。

如果我取消注释我的ready(function())的下半部分，并删除fnInitComplete，它甚至在第一页上也无法工作。

以下是我代码中相关的部分：

        $(document).ready(function(){
            tbl = $('#nutzer').dataTable( {
                "bJQueryUI": true,
                "sScrollX": "100%",
                "bProcessing": true,
                "bServerSide": true,
                "iDisplayLength": 10,
                "sAjaxSource": "xhr.php",
                "sPaginationType": "full_numbers",
                "fnInitComplete": function() {
                    $('#nutzer tbody tr').on("click", function () {
                        aufklappen(this);
                    } );
                }
            } );

            $( "#create-user" ).button().click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });
//            $('#nutzer tbody tr').on("click", function () {
//                aufklappen(this);
//            } );
        });

        function aufklappen(row) {
            if ( tbl.fnIsOpen(row) ) {
                tbl.fnClose(row);
            } else {
                set = tbl.fnSettings().aoOpenRows[0];
                (set != null) ? (tbl.fnClose(set.nParent)) : null;
                $.post("benutzerBearbeiten.php", { 
                    funktion : "benutzerDaten",
                    id : $(row).children( "td:first-child" ).text()
                }, function(data){
                    tbl.fnOpen( row, data);
                    $( "#deaktivieren").button().click(function(e){
                        e.preventDefault();
                        deaktivieren();
                    });
                    $( "#speichern").button().click(function(e){
                        e.preventDefault();
                        speichern();
                    });
                }
            ) };
        }

在Datatables分页后，页面加载或页面更改后，我可以手动调用。

$('#nutzer tbody tr').on('click', function () {
    aufklappen(this);
} );

点击函数已经完美地绑定到tr上。

看起来datatables插件创建的元素没有到达我定义的on()处理程序所在的dom，但我无法弄清楚原因。

编辑

使用"The System Restart"的答案，最终我删除了fnInitComplete部分，然后添加了

"asStripeClasses": [ "odd nutzer_tr", "even nutzer_tr"]

转到初始化部分和

$("body").delegate(".nutzer_tr", "click", function () {
    aufklappen(this);
});

对于 ready(function())，额外的类 nutzer_tr 的作用是防止打开的表格行关闭。

- DKSan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- The System Restart · Accepted Answer

我想你需要实时事件：

$('body').on('click', '#nutzer tbody tr', function () {
    aufklappen(this);
});

或者可以使用delegate()

$('body').delegate('#nutzer tbody tr', 'click', function () {
    aufklappen(this);
});