Question

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

 <!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>

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

1 个答案: