Question

Here is my original code:

<tr class="song" id="'.$this->i.'">
   <td class="clickable" id="td1_'.$this->i.'">
   ...
   </td>
</tr>

And the jQuery for that:

$(".clickable").click(function() 
{
//
    //Make only certain parts of songs clickable
    //Hacky Way to Get Index
    var temp = $(this).attr("id");
    temp = temp.split('_');
    var i = temp[1];
    var status = $('#status_'+i).val();

    alert('Clicked ' + i);

    var maxid = $('#maxid').val();
    if(status == "max") //if maximized
    {
        alert("max");
    }
    else
    {
        var user = $("#user_min"+i).val();
        var ytcode = $("#ytcode_min"+i).val(); 
        var title = $("#title_min"+i).val(); 
        var artist = $("#artist_min"+i).val(); 
        var genre = $("#genre_min"+i).val(); 
        var score = $("#score_min"+i).val(); 
        var ups = $("#ups_min"+i).val(); 
        var downs = $("#downs_min"+i).val();
        var id = $("#id_min"+i).val(); 
        var upload_date = $("#upload_date_min+i").val(); 

        //Maximizing New Song
        dataString = 'user='+ user + '&ytcode=' + ytcode +
                         '&title=' + title + '&artist=' + artist + 
                         '&genre=' + genre + '&score=' + score + 
                         '&ups=' + ups + '&downs=' + downs + 
                         '&id=' + id + '&upload_date=' + upload_date + 
                         '&i=' + i;

        $.ajax({
            type: "POST",
            url: "maxSongAjax.php",
            data: dataString,
            cache: false,
            success: function(html){
            $('#'+i).fadeIn(1000).html(html);
            }
        });

        //Setting Max ID to New Song
        $('#maxid').val(i);
    }

    return false;
}); 

I have the ajax returning identical html to what was replaced for testing purposes. However, after I click the loaded html, it does not respond to clicks. No pop-ups are shown from the alerts.

Why is this? How come the loaded html isn’t responding like the first?

Answer 1

This is a very common issue for people new to jQuery; you have to use .live()

.click() only binds to existing elements.

An alternative to .live() is .delegate()