jQuery isn't working after .append function

Question

All, I've got some links that get displayed and someone can click the link if a person likes it and then I basically assign it to another div with a remove link so it can be removed. Here is the code for the .post

jQuery.post("save_song.php", { song_id: song_id, love_like_hate: "love" },
       function(response) {
         if(response.responseText1=="too_many"){
                alert(response.responseText2);
            }else if(response.responseText1=="already_selected"){
                alert(response.responseText2);
            }else{
                alert(response.responseText2);
                jQuery("#div_song_id_"+song_id).html(response.responseText1);
                jQuery("#love_it").append(response.responseText2);
                jQuery("#current_count_love").html(response.responseText3);
                if(response.responseText4=="remove_initial"){
                    jQuery("#love_none").hide();
                }
            }
    }, "json");

Here is the save_song.php page that sends back the page:

echo json_encode(array(
            'responseText1' => 'Youve added '.$artist_name.' - '.$track_name.' to your '.$love_like_hate.' list!',
            'responseText2' => '<div id="div_added_song_id_'.$song_id.'" style="padding:0 0 0 10px; "><span style="display:inline-block; width:200px;">'.$artist_name.'</span><span style="display:inline-block; width:400px;">'.$track_name.'</span><span style="display:inline-block; width:100px;">'.$track_time.'</span><span style="display:inline-block; width:100px;"><a href="#" class="remove_song" id="delete_'.$song_id.'">Remove</a></span></div>',
            'responseText3' => $resultrowschecktotal
        ));

My issue is that when the response.responseText2 is appended to my div the jquery for the .remove_song doesn't work and it basically just uses the link and tries to do #. Here is the code for the remove_song:

jQuery(".remove_song").click(function(){
    event.preventDefault();
    song_id = jQuery(this).attr("id");
    song_id = song_id.split("_");
    song_id = song_id[1];
    var answer = confirm("Do you want to remove this song?")
    if (answer){
        jQuery.post("delete_song.php", { song_id: song_id },
            function(response) {
                jQuery("#div_added_song_id_"+song_id).hide();
                jQuery("#current_count_"+response.responseText2).html(response.responseText1);
            }, "json");
    }
});

How can I still utilize this for newly appended links since they aren't loaded when the DOM is finished?

Answer 1

Your latest anchor element doesnt bind anything, so it wont do anything when clicking, try jquery live like this:

jQuery(".remove_song").live('click', function(){
    event.preventDefault();
    song_id = jQuery(this).attr("id");
    song_id = song_id.split("_");
    song_id = song_id[1];
    var answer = confirm("Do you want to remove this song?")
    if (answer){
      jQuery.post("delete_song.php", { song_id: song_id },
        function(response) {
            jQuery("#div_added_song_id_"+song_id).hide();
            jQuery("#current_count_"+response.responseText2).html(response.responseText1);
        }, "json");
    }
});

for jquery 1.7+ use

jQuery(document).on('click','.remove_song',function(){
    event.preventDefault();
    song_id = jQuery(this).attr("id");
    song_id = song_id.split("_");
    song_id = song_id[1];
    var answer = confirm("Do you want to remove this song?")
    if (answer){
      jQuery.post("delete_song.php", { song_id: song_id },
        function(response) {
            jQuery("#div_added_song_id_"+song_id).hide();
            jQuery("#current_count_"+response.responseText2).html(response.responseText1);
        }, "json");
    }
});

Answer 2

the jquery .click event only works on elements you assign it to, so if you're bringing in content dynamically, you'll want to use a live event: http://api.jquery.com/on/ which you can set to watch a "DOM area" for changes and have the click event automatically assigned to them.

I noticed other people posted to use the .live function, however, it's a deprecated function as of jQuery 1.7.

Answer 3

You need to use $.live() or $.delegate() instead of just click().

jQuery('#love_it').delegate('.remove_song', 'click', function (){
    event.preventDefault();
    song_id = jQuery(this).attr("id");
    song_id = song_id.split("_");
    song_id = song_id[1];
    var answer = confirm("Do you want to remove this song?")
    if (answer){
        jQuery.post("delete_song.php", { song_id: song_id },
            function(response) {
                jQuery("#div_added_song_id_"+song_id).hide();
             jQuery("#current_count_"+response.responseText2).html(response.responseText1);
        }, "json");
    }
});