将click事件绑定到jQuery中的tr元素Datatable on（）不起作用 [英] Binding a click event to tr elements in jQuery Datatable on() doesn't work

问题描述

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

I am developing a table that will contain all our users which can also be changed by clicking the tablerow and editing the data in a form that will open once the click was performed.

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

If i have all the users loaded at page load, my code works fine.

一旦我更改了我的数据表，以便在datatable初始化时加载用户，在第一页上工作。

Once i change my datatable to load the users at datatable initialisation it will only work on the first page.

如果我取消注释我的 ready（function（））的下半部分，并删除

If i uncomment the lower part of my ready(function()) and delete fnInitComplete it wont even work on the first page.

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

Here is the relevant part of my code:

        $(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();
                    });
                }
            ) };
        }

通过数据表进行页面加载或页面更改分页后，我可以手动调用< p'

After page load or page change through the datatables pagination i can manualy call

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

，点击功能完全绑定到tr。

and the click function gets bound to the tr's perfectly.

似乎我认为，由datatables-plugin创建的元素没有达到我定义的on（）处理器的dom，但我无法弄清楚为什么。

Seems to me that the elements created by datatables-plugin are not getting up the dom to the on() handler that i defined but i cant figure out why.

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

Utilising "The System Restart"s answer i ended up deleting the fnInitComplete part and add

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

到初始化部分，

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

至 ready（function（）） 。额外的类 nutzer_tr 是为了防止打开的tablerow关闭。

to the ready(function()). The additional class nutzer_tr is to prevent the opened tablerow from closing.

推荐答案

我认为你需要现场活动：

I think you need live event:

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

或可以使用delegate（）

or can use delegate()

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

这篇关于将click事件绑定到jQuery中的tr元素Datatable on（）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！