Question

I have a wall posting system on a social network that I am currently building which uses jQuery and Ajax to post the message to the wall and php saves it to the DB. After the post appears on the wall there are “comment” and “like” links. I am trying to bring down a comment box when the “comment” link is clicked, however I can’t seem to access the element with javascript.

Here is the code to display the wall post:

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>';

and here is the code I was trying to use to access the <a id="comment" href="#"> with:

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

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

Any ideas or tips on how I can get this working would be greatly appreciated!

Answer 1

You can use on (falling back on delegate if you are using an older version of jQuery) to listen to all click events on a like or comment button:

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

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

Don’t use live unless you are using a much older version of jQuery that doesn’t supply you with on or delegate. It is, if I remember correctly, the least efficient of the event listeners (aside from the bind method) for listening for an event coming from multiple elements.

Also, don’t use an ID if there is going to be more than one element on the page with the ID – the ID needs to be unique across the document.