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" );     });
  }

    });

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

3 个答案: