jquery - 连续动态添加按钮的单击事件无法正常工作

Question

我已经使用 JQuery 动态创建了表。我已将按钮（图像）添加到每一行。单击特定按钮时，我需要单独为该特定按钮分配一些功能（例如：警报）。这里只有警报仅适用于第一行的按钮。其他行中的按钮不会触发点击事件。

而且我无法在单击其按钮的警报中获得正确的行号。

我的脚本：

$(document).ready(function () {
  for (i = 1; i < 10; i++) {
    var content = '<table>'
    content += '<tr><td>'
    content += '<img class="inline" id="submitbtn" src="../../submit.png" />';
    content += '</td></tr>'
    content += '</table>'
    $("#mainSection").append(content);
    $("#submitbtn").click(function () {
      alert("row" + i + "Data Submitted");
    });
  }
});
my html; < div id = 'mainSection' > < /div>

Answer 1

并在 submitbtn 上将 id 更改为 class

$(document).on('click', '.submitbtn', function() {
    alert("row" + i + "Data Submitted" );     
});

Answer 2

在创建元素之前，您需要对动态内容使用委托事件处理程序，因为事件是在加载时附加的。另请注意，您最终会得到很多重复的id属性，而您真正应该使用class. 最后，该i变量在点击处理程序中将不可用，因此您需要遍历 DOM 以获取index()最近的tr元素。试试这个：

for (i=1; i<10; i++) {
    var content = '<table>'
    content += '<tr><td>'
    content += '<img class="inline submitbtn" src="../../submit.png" />';
    content += '</td></tr>'
    content += '</table>'
    $("#mainSection").append(content);
}

$("#mainSection").on('click', '.submitbtn', function() {
    alert("row" + $(this).closest('table').index() + "Data Submitted" );
});

Answer 3

这可能会满足您的需求。

$(document).ready(function(){
   for(i=1; i<10; i++)
   {
    var content = '<table>'
    content += '<tr><td>'
    content += '<img class="submitbtn inline" src="../../submit.png" />';
    content += '</td></tr>'
    content += '</table>'
    $("#mainSection").append(content);
   }

$(".submitbtn").click(function() {
      alert("row" + $(this).closest('td').parent()[0].sectionRowIndex + "Data Submitted" );     });
  }

    });