添加新行时，jQuery在表上触发自定义事件[重复]

Question

这个问题已经在这里有了答案：

• 在动态创建的元素上进行事件绑定？ 23个答案

当新行添加到表时，我试图触发自定义事件。 以下是我使用的代码，但事件未触发。

 <!DOCTYPE html>
    <html lang="en">
       <head>
          <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
       </head>
       <body>
          <div id="container">first div</div>
          <script>
             $( document ).ready(function() {    
             $( "table#t-result-data tbody" ).on( "update", function() {
               console.log('tr id' );
             });

             function appendToTable() {
                 var htmlStr;     
                 htmlStr = "<table id='t-result-data'><tbody><tr><td>First Row First column</td></tr></tbody></table>";                      
                    $("#container").html(htmlStr)
                    $('table#t-result-data').trigger('update');
                  }
               appendToTable();    
               });

          </script>   
       </body>
    </html>

我究竟做错了什么。 该表及其行是动态添加的

Answer 1

您的代码几乎在那里，但是有两个问题。

首先，您要在DOM中存在元素之前附加事件处理程序。 您需要使用委托事件处理程序来解决此问题。

其次，您在#t-result-data元素上触发事件，但在tbody上监听它。 这需要保持一致。

解决了这些问题后，代码可以正常工作：

 $(document).ready(function() { $(document).on('update', 'table#t-result-data', function() { console.log('tr id'); }); function appendToTable() { var htmlStr = '<table id="t-result-data"><tbody><tr><td>First Row First column</td></tr></tbody></table>'; $('#container').html(htmlStr) $('table#t-result-data').trigger('update'); } appendToTable(); }); 

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <div id="container">first div</div>