Question

我从AJAX获取数据来构建表。该表将有一个从数据库中删除行的链接。我无法让听众回复点击生成的内容＆＃34;＆＃34;删除＆＃34;链接。

<!-- 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中，并且监听器不知道该表存在？无论如何，我如何让听众响应点击生成的链接？

Answer 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

Answer 2

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

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

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

来自生成元素的jquery catch事件

2 个答案: