Question

我在社交网络上有一个墙上发布系统，我正在构建，它使用jQuery和Ajax将消息发布到墙上，php将其保存到数据库中。帖子出现在墙上后，有“评论”和“喜欢”链接。我试图在点击“评论”链接时关闭评论框，但我似乎无法使用javascript访问该元素。

以下是显示墙贴的代码：

var wall_post = '<li><div class="user_activity_feed_item_user_pic"><img src="images/temp/prof_pic_temp.jpg" class="avatar"></div><div class="user_activity_feed_item_title"><a href="proflie-view.php">Tyler Bailey</a></div> <div class="user_activity_feed_item_content"><p class="activity_feed_text">' + textarea_content + '</p> ' + image_html + '<div class="data"><p class="name"><a href="' + siteurl + '" target="_blank">' + sitetitle + '</a></p><p class="caption">' + siteurl + '</p><p class="description">' + sitedesc + '</p></div><div class="user_activity_feed_item_comment_bar"><ul> <li class="activity_feed_timestamp">July 16, 2012 2:08pm</li> <li><a id="comment" href="#">Comment</a></li><li><a id="like" href="#like_view">Like</a></li></ul></div></div></li>';

以下是我尝试使用以下代码访问<a id="comment" href="#">的代码：

 //initiate comment box for status feeds
$(document).ready(function(){
    $('#comment_wrapper').hide();

    $('a#comment').click(function(){
        $('#comment_wrapper').show();
    });
});

我将非常感谢任何有关如何使其发挥作用的想法或提示！

Answer 1

只需使用事件委托，例如通过on()：

var listEl = $('ul'); // parent of the newly added li element
listEl.on('click', 'a', function(e){
    e.preventDefault();
    // do something in response to a click on a link from within
    // the newly-added content.
});

JS Fiddle demo

要记住的重要一点是，在绑定/分配时，绑定，分配或委托on()方法的元素必须存在于DOM中。因此，使用DOMReady或onLoad上文档中存在的新添加元素的最近父元素。

Answer 2

您可以使用on（如果您使用的是旧版本的jQuery，请回到delegate）来收听like或comment按钮上的所有点击事件：

var comment_wrapper = $("#comment_wrapper");
comment_wrapper.hide();

$(document).on("click", ".comment", function() {
    comment_wrapper.show();
});

请勿使用live，除非您使用的是更旧版本的jQuery，但却没有为您提供on或delegate。如果我没记错的话，事件监听器的效率最低（除了bind方法），用于监听来自多个元素的事件。

另外，如果页面上有多个元素，请不要使用ID - ID必须在整个文档中唯一。

Answer 3

由于链接是动态生成的，请使用live（）

$('a#comment').live("click", function(event){

//your
//actions here


});

使用Javascript访问动态创建的链接

3 个答案: