jquery从生成的元素中捕获事件[重复]答案

【问题标题】：jquery catch event from a generated element [duplicate]jquery从生成的元素中捕获事件[重复]
【发布时间】：2018-02-23 20:25:38
【问题描述】：

我正在从 AJAX 获取数据以构建表。该表将具有从数据库中删除行的链接。我无法让听众响应点击生成的内容的“删除”链接。

<!-- contribId is populated initially from PHP -->
<input id="hidden-contrib-id" value="<?= $contribId ?>" />

<div id="checksEnteredContainer">
</div>

<script>
$(document).ready(function(){

  // get data via ajax and build table
  buildCheckEnteredTable($('#hidden-contrib-id').val());

  // various listeners here...

  $('.remove_check').on('click', function() {
    alert($(this).data('contribution-id'));
  });

});

/**
 * Get checks from database
 */
function buildCheckEnteredTable(contribId) {
  var url = "/path/to/script";
  var response = $.post(url, {action: 'getChecks', contribId: contribId});

  response.done(function(result) {

    // build html table from the data
    $('#checksEnteredContainer').html(buildTable(result));
}

function buildTable(data) {
  var numberOfRows = data.length;
  var rows='';
  for(i=0; i<numberOfRows; ++i) {
    rows += '<tr>' + 
            '<td>' + data[i].checkNumber + '</td>' +
            '<td>' + data[i].amount + '</td>' + 
            '<td><a href="#" class="remove_check" data-contribution-id="' + data[i].checkId + '">remove</a></td>'
            '</tr>';
  }

  var table = '<table class="table"><tr><th>Check Number</th><th>Amount</th><th></th></tr>' + 
              rows + 
              '</table>';

  return table;
}

表格创建工作正常并显示在浏览器中； remove_check 类的监听器不起作用。

我的猜测是新创建的表实际上不在 DOM 中，并且侦听器不知道该表存在？无论如何，如何让听众响应点击生成的链接？

【问题讨论】：

您的猜测是正确的，有几种方法可以处理它。一种方法是将监听器放在父#hidden-contrib-id 上，并让它处理其子元素的更改，因为当您的页面加载时hidden-contrib-id 就在那里，尽管它内部发生了变化，但监听器仍然在那里。或者您可以将监听器包装在一个函数中，并在更新它们后将它们重新附加到动态元素$('#checksEnteredContainer').html(buildTable(result)); // attach various listeners here 或者您可以有一个监听器来监听更改并在更新时附加监听器等。
哦，duh... .remove_check 在执行侦听器时不存在。所以我需要将它附加到#checksEnteredContainer。现在查看上面提供的链接...
:facepalm: $('.remove_check').on('click', function() { vs $(document).on('click','.remove_check', function() { 感谢引用的链接。不会再犯这个错误了。

标签： javascript jquery listener

【解决方案1】：

 // Insted of this click, you can use below click function 

$('.remove_check').on('click', function() {
    alert($(this).data('contribution-id'));
  });


  $(document).on('click','.remove_check', function() {
             alert($(this).data('contribution-id'));
        });

注意：- 对动态创建的元素使用事件委托。

更多详情请转至here

【讨论】：

【解决方案2】：

当然，您的猜测是正确的。你可以...

用setTimeout延迟添加监听器
使用onclick触发功能
在ajax请求成功函数中添加监听

所有这些都应该使监听器工作。

【讨论】：