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

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

<span>

Answer 2

好的......所以我明白了。我将wireupMilestonesDelete（）函数移到了AddButton click事件之外，就在$（document）.ready函数的下面，它现在正在工作。我在每个新行插入后向每一行添加一个新的click事件。很高兴结束了！：）

Answer 3

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

请改为尝试：

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

jsfiddle

使用JQuery .on（）函数添加click事件会触发列表中的每个项目

3 个答案: