javascript - 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() 仅绑定(bind)到现有元素。

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