将点击事件绑定到 jQuery Datatable on() 中的 tr 元素不起作用

2024-03-17

我正在开发一个包含所有用户的表,也可以通过单击表行并在单击执行后打开的表单中编辑数据来更改该表。

如果我在页面加载时加载了所有用户,我的代码就可以正常工作。

一旦我更改数据表以在数据表初始化时加载用户,它将仅在第一页上工作。

如果我取消注释我的下半部分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();
                    });
                }
            ) };
        }

通过数据表分页加载页面或页面更改后,我可以手动调用

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

并且 click 函数与 tr 完美绑定。

在我看来,datatables-plugin 创建的元素没有将 dom 提升到我定义的 on() 处理程序,但我不明白为什么。


EDIT

利用“系统重新启动”的答案我最终删除了fnInitComplete部分并添加

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

到初始化部分和

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

to the ready(function())。附加类nutzer_tr是为了防止打开的表行关闭。


我认为你需要现场活动:

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

或者可以使用 delegate()

$('body').delegate('#nutzer tbody tr', 'click', function () {
    aufklappen(this);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将点击事件绑定到 jQuery Datatable on() 中的 tr 元素不起作用 的相关文章

随机推荐