javascript - AJAX后生成的链接不起作用

Question

我正在开发一个评论后项目。我使用 AJAX 生成评论。每个生成的评论都有“赞”按钮。但新生成的“赞”按钮在我刷新页面之前不起作用。生成的链接如下所示。

<div class="comment-body-container">
    <div class="comment-body">
        Oye jetha lali
        <a class="like-comment comment-like-color comment_main_id_45" 
            data-like-comment-id="45" href="javascript:;">
                <i class="fa fa-thumbs-up"></i>
        </a>
    </div>
    <div class="liked-this-comment liked_this_comment_45"></div>
</div>

刷新页面后输出。

<div class="comment-body-container">                                                                          
    <div class="comment-body">
        Oye jetha lali                                                                               
        <a class="like-comment comment-like-color comment_main_id_45" 
            data-like-comment-id="45" href="javascript:;">                                                                                  
            <i class="fa fa-thumbs-up" aria-hidden="true"></i>                                                                               
        </a>                                                                            
    </div>                                                                          
    <div class="liked-this-comment liked_this_comment_45">                                                                                                                                                          
    </div>                                                                       
</div>

输出几乎相同。但直到我刷新页面后它才起作用。有人可以给我提供解决方案吗？

Answer 1

对于动态生成的内容，您必须在加载内容后重新应用事件，或者更好的是，使用事件委托(delegate)到您的“喜欢”按钮，如下所示:

$(document).on("click", '.like-comment', function(event) { 
   //do your like stuff here
});

事件委托(delegate)可以很好地处理动态生成的内容，并且是处理这种特定情况的首选方式。