jQuery - 加载的HTML不响应点击

Question

这是我的原始代码:

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

而jQuery为此:

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

我有一个ajax返回相同的html到被替换为测试目的.但是,在我单击加载的html后,它不响应点击.警报中不显示任何弹出窗口.

为什么是这样？为什么加载的html没有像第一个那样响应？

Answer 1

对于刚接触jQuery的人来说,这是一个非常普遍的问题; 你必须使用.live()

.click()仅绑定到现有元素.

.live()的替代方法是.delegate()