我使用jQuery多张新的addTask表单元素每次点击一个链接时添加到页面上的UL。

I am using jquery to add mulitple new "addTask" form elements to a "ul" on the page every time a link is clicked.

  $('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的按钮保存任务。

These new nested ul elements all have an button with the same class "saveTask". I then have a function that allows you to save a task by clicking on an button with the class "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在页面上。

This essentially allows the user to enter some text into a form input, hit save, and then the task gets saved into the database using ajax, and displayed on the page using jQuery.

这正常工作时，存在与类saveTask页面上只有一个元素，但如果我有带班saveTask将停止正常工作1个多形式的元素，如变量VAR任务节目为未定义，而不是形式的输入的实际值。

This works fine when there is only one element on the page with the class "saveTask", but if I have more than 1 form element with the class "saveTask" it stops functioning correctly, as the variable "var task" shows as "undefined" rather than the actual value of the form input.

推荐答案

不要依赖于 .parent（）方法。使用 .closest（'形式'）代替。所以，下面一行：

Don't rely on the .parent() method. Use .closest('form') instead. So the following line:

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

应该是这个样子，而不是：

should look something like this instead:

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

编辑： 根据您提供的最新信息，它看起来当你想注册单击事件处理它的失败了因某种原因等。试试这个JavaScript的，而不是因为它会使用的生活事件，以便在页面上的所有新添加的项目会自动将自动连接到他们的单击事件：

Based on the updated information you provided, it looks like when you're trying to register the click event handler it's failing out for some reason. Try this javascript instead as it will make use of the live event so that all the newly added items on the page will automatically have the click event autowired to them.:

$(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;
    });
});