Question

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

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

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.

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.

Answer 1

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');

EDIT:
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;
    });
});