CODEWITHSUNDEEP
javascriptjqueryajax
Ty Bailey
Ty Bailey

Reputation: 2432

Accessing a dynamically created link with Javascript

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!

Upvotes: 0

Views: 249

Answers (3)

David Thomas
David Thomas

Reputation: 253308

Simply use event delegation, via on() for example:

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.

The important thing to remember is that the element to which you bind, or assign or delegate, the on() method must be present in the DOM at the time of the binding/assignation. So work with the closest parent element of the newly-added elements that exists in the document on DOMReady or onLoad.

Upvotes: 3

Sean Vieira
Sean Vieira

Reputation: 159875

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.

Upvotes: 1

TheodoreV
TheodoreV

Reputation: 304

Since the links is produced dynamically use live()

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

//your
//actions here


});

Upvotes: 0

Related Questions