Question

我做了以下功能：

function populatetable(){
  $.ajax({
    type: 'GET',
    url: 'backend/conn.php?action=populatetable'
  }).done(function(data){
     var response = data.data;
     $.each(response, function(key, element){
        row += '<tr> <<td>' + element.phone + '</td> <td> <button class="trigger"> Edit Data </button> </td> </tr>';
     }); 
     $('table.loadeddata > tbody').html(row);
  })
}

并将其存储到名为script.js的文件中。然后在另一个名为index.php的文件中，我在标记<script src='script.js'></script>中包含了该文件在上面的脚本标记下方，我再次制作了<script>并将以下代码放入第二个<script>代码中：

$('document').ready(function(){
   populatetable();
   $('button.trigger').click(function(){
     window.alert('button works');
   });
});

为什么按钮在点击时没有显示alert？按钮看起来很完美，似乎关闭造成了问题，但我不确定。

Answer 1

该按钮是动态创建的，因此在加载时它不在DOM中。尝试：

$('body').on('click', '.trigger', function(){
   window.alert('button works');
});

小提琴https://jsfiddle.net/sn36oyfo/

详细了解event delegation

Jquery生成的按钮不起作用，关闭

1 个答案: