使用 JQuery .on() 函数添加单击事件会为列表中的每个项目触发

Question

我有一个按钮，单击该按钮时会动态地将新行插入到表中。 我希望能够从此表中删除行，因此我尝试使用 jQuery 的.on()函数将单击处理程序附加到每行末尾的 span 元素。这工作正常，除了当我单击跨度删除单个项目时，会为表中的所有项目调用 Click 事件......它们都被移除了。 如何连接它，以便它只调用我单击处理程序的行？ 这是我的代码：

这是 js：

$("#milestonesList").on('click', 'span[id*="tempmilestone"]', function (e) {
$(this).each(function () {
$('span[id*="tempmilestone"]').each(function () {
alert("ON: " + $(this).attr("idx"));
_milestones = _milestones.slice(parseInt($(this).attr("idx"), 10));
buildMilestoneOutput(milestonesList);
});
});
});

现在，无论我单击哪一行，都会触发每一行的单击事件。 我做错了什么？

我已经尝试了很多种方法，没有.each()函数，但它仍然为表中的每一行触发。 也许如果我显示其余代码会有所帮助：

下面是最后调用的buildMilestoneOutput函数：

function buildMilestoneOutput(container) {
container.innerHTML = "";
alert("Length: " + _milestones.length);
var s = "<table id='testscroll' style='width: 690px; padding: 10px;'><tr><td style='font-weight: bold;'>Title</td><td style='font-weight: bold;'>Description</td><td style='font-weight: bold;'>DueDate</td></tr>"
for (var i = 0; i < _milestones.length; i++) {
s += "<tr><td style='width: 300px; padding-bottom: 10px;'>" + _milestones[i].Title + "</td><td style='width: 350px; padding-bottom: 10px;'>" + _milestones[i].Description + "</td><td style='width: 30px; padding-bottom: 10px;'>" + _milestones[i].Name + "</td><td><span idx='" + i + "' style='margin-left: 5px; cursor: pointer;'  id='tempmilestone'>remove</span></td></tr>";
}
s += "</table>";
container.innerHTML = s;
}

当用户单击"添加里程碑"按钮时，将调用此原始内容：

$("#lbAddMilestone").click(function () {

milestonesList.innerHTML = "";
var newMilestone = new GoalMilestone();
newMilestone.Title = "New Milestone";
_milestones.push(newMilestone);
buildMilestoneOutput(milestonesList);
wireupMilestoneDeletes();

return false;
});

这是wireupMilestoneDeletes：

function wireupMilestoneDeletes() {

$("#milestonesList").on('click', 'span[id*="tempmilestone"]', function (e) {
alert("ON: " + $(this).attr("idx"));
_milestones = _milestones.slice(parseInt($(this).attr("idx"), 10));
buildMilestoneOutput(milestonesList);
});
}

Answer 1

你不需要每个循环，更不用说两个了。将 click 事件绑定到具有包含"tempmilestone"id的任何<span>，并运行处理程序以单击所单击的特定<span>。因此，这应该足够了：

$("#milestonesList").on('click', 'span[id*="tempmilestone"]', function (e) {
alert("ON: " + $(this).attr("idx"));
_milestones = _milestones.slice(parseInt($(this).attr("idx"), 10));
buildMilestoneOutput(milestonesList);
});

Answer 2

好的...所以我想通了。 我将 wireupMilestonesDelete() 函数移到 AddButton 单击事件之外，位于 $(document).ready 函数下方，它现在可以工作了。 在每次插入新行之后，我正在向每行添加新的单击事件。 很高兴结束了！:)

Answer 3

你使用的是双倍每个循环，这在这里没有意义。至少，不是我理解的东西...

试试这个：

$("#milestonesList").on('click', 'span[id*="tempmilestone"]', function(e) {
$(this).each(function() {       
alert("ON: " + $(this).attr("idx"));
//(.......)    
});
});​

斯菲德尔