Question

I have this:

$('#wallCommentResponse' + wallID).append('<div class="userWallComment"><a id="showCommentLink' + wallID +'" class="showCommentLink" ref="'+ wallID +'" data-id="'+ howMany +'" style="cursor: pointer;">Hide comments</a></div>').show();

INSIDE the click function.

I have this to show a box, with the link “hide comments” at the bottom of all the comments. It shows it how i want to, but when i click nothing happens. And i have binded .showCommentLink to

        $('.hideWhenShowAll' + wallID).show(); 

I have another link, just like this, but is not showing by append() but normal HTML, that you also can click on “Hide comments” and it works very well, and its binded to the same function.

So something must be wrong when you append the link, inside the same function that the link triggers on click?

What is wrong? thank you

Answer 1

Change your current .click(func) to .live('click', func), something like this:

$(".showCommentLink").live("click", function() {
  $('.hideWhenShowAll' + $(this).attr("ref")).show(); 
});

This will work for elements added later as well, via .append() or whatever other method, it’s also cheaper when you have many elements. Currently your $(".showCommentLink") selector is finding elements, binding to them…if they were appended later they don’t get the click handler, because the selector didn’t find these new elements when it was run.