1

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

这是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);
    });
}
4

3 回答 3

2

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

$("#milestonesList").on('click', 'span[id*="tempmilestone"]', function (e) {
    alert("ON: " + $(this).attr("idx"));
    _milestones = _milestones.slice(parseInt($(this).attr("idx"), 10));
    buildMilestoneOutput(milestonesList);
});
于 2012-10-22T14:00:35.793 回答
1

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

于 2012-10-22T15:38:53.890 回答
0

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

试试这个：

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

jsfiddle

于 2012-10-22T13:56:55.583 回答