javascript - 为什么我的 jQuery 事件处理程序在附加到多个元素时会失败？

Question

每次单击链接时，我都使用 jquery 将多个新的“addTask”表单元素添加到页面上的“ul”。

  $('span a').click(function(e){
    e.preventDefault();

     $('<li>\
     <ul>\
     <li class="sTitle"><input type="text" class="taskName"></li>\
     <li><input type="button" value="saveTask" class="saveTask button"></li>\
     </ul>\
     </l1>')
     .appendTo('#toDoList');
    saveTask();
});

这些新的嵌套 ul 元素都有一个具有相同类“saveTask”的按钮。然后我有一个功能，允许您通过单击带有“saveTask”类的按钮来保存任务。

// Save New Task Item 
function saveTask() {
    $('.saveTask').click(function() {
        $this = $(this);
        var thisParent = $this.parent().parent()

        // Get the value
        var task = thisParent.find('input.taskName').val();

        // Ajax Call 
        var data = {
            sTitle: task,
            iTaskListID: 29
        };

        $.post('http://localhost:8501/toDoLists/index.cfm/Tasks/save', 
            data, function(data) {

            var newTask = '<a>' + task + '</a>'
            thisParent.find('li.sTitle').html(newTask);
        });
        return false;
    });
}

这基本上允许用户在表单输入中输入一些文本，点击保存，然后使用 ajax 将任务保存到数据库中，并使用 jQuery 显示在页面上。

当页面上只有一个类为“saveTask”的元素时，这工作正常，但如果我有超过 1 个类为“saveTask”的表单元素，它就会停止正常运行，如变量“var task”所示作为“未定义”而不是表单输入的实际值。

Answer 1

不要依赖 .parent() 方法。请改用 .closest('form')。所以下面一行:

var thisParent = $this.parent().parent()

应该看起来像这样:

var thisParent = $this.closest('form');

编辑:根据您提供的更新信息，当您尝试注册 click 事件处理程序时，它似乎由于某种原因失败了。试试这个 javascript，因为它会使用 live 事件，这样页面上所有新添加的项目都会自动将点击事件自动连接到它们。:

$(function(){
    $('span a').click(function(e){
        e.preventDefault();

         $('<li>\
             <ul>\
             <li class="sTitle"><input type="text" class="taskName"></li>\
             <li><input type="button" value="saveTask" class="saveTask button"></li>\
             </ul>\
             </l1>')
             .appendTo('#toDoList');

    });

    $('.saveTask').live('click', function() {
        $this = $(this);
        var thisParent = $this.closest('ul');

        // Get the value
        var task = thisParent.find('input.taskName').val();

        // Ajax Call 
        var data = {
            sTitle: task,
            iTaskListID: 29
        };

        $.post('http://localhost:8501/toDoLists/index.cfm/Tasks/save', 
            data, function(data) {

            var newTask = '<a>' + task + '</a>'
            thisParent.find('li.sTitle').html(newTask);
        });
        return false;
    });
});