JQuery .load() makes content not clickable after load

Question

I have a page in which I have a div. The content from that div is being populated by an includes page, and that includes page is making a call to a database to retrieve content.

When a user clicks an 'add task' button, an ajax call is made to insert content into a database and the div that shows all tasks is refreshed with .load(). The same process happens for 'remove task'; another ajax call is made that deletes a row from a adatabase and the div is refreshed using .load().

I am seeing the insertions and deletions in my database table, but the front-end is a little wonky. When the page first loads I can perform an unlimited number of 'add' actions and all new tasks show up in the div. However, I can only do one 'delete' action; after the first try, I just can't seem to select an element from the div.

Here's the 'add' code:

$("#accept_new_task").click(function(){
    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, add a new item to task list and clear input
        function(data) {

            //Clear input
            $("#new_task_name").val('');
            $("#new_task_description").val('');

            //Show new task
            $('#newly_added_tasks').load('[page on server]', function() {
            });             



        });

    jQuery.ajaxSetup({async: true});    
});

And the 'delete' code:

//Deletes recently added task
$(".newtask").click(function(){
    alert('!');  //to test
    var val = $(this).attr('value');

    jQuery.ajaxSetup({async: false});

    //Make ajax call
    $.post("[url]", { [data] },

        //If successful, refresh div 
        function(data) {
            $('#newly_added_tasks').load('[page on server]', function() {
                alert('Load was performed.');
            });                             
        });     

    jQuery.ajaxSetup({async: true});  

});

The content that is being loaded is a table generated with content extracted from a database call. Here's a snippet:

<td>'.$task[$i]['name'].'</td>
<td>'.$task[$i]['description'].'</td>
<td><input type="button" class="newtask" name="accept_new_task" id="task_'.$task[$i]['task_id'].'" value="'.$task[$i]['task_id'].'"></td>

Any help would be appreciated.

Answer 1

The jQuery .click event is not a live event, so it will only make items it has been assigned to clickable. Once those items are refreshed, removed or new items come in, the refreshed items won't have the click event and new items won't have the click event.

You'll want to use the jQuery .on event, which is the replacement for the .live event. That way when the contents refresh, they'll still have a click event attached.

The other option is to assign the click event whenever the content refreshes.

Answer 2

change this line

$(".newtask").click(function(){

to

$(document).on(".newtask","click",function(){

or use delegate

$(document).delegate("click",".newtask",function(){

reason is the dynamically added elements do not get themselves attached to event handlers use on if you are using jQuery 1.7+ else use delegate

Answer 3

it will work with this

$(document).on("click",".newtask",function(){

or

$(document).delegate(".newtask","click",function(){