jQuery - Click on X, grab the NAME, then use that to show a related element

Question

Here's what's happening.

My page loads. Then jQuery loads a feed which is injected into a contentCol div...

in that feed is:

<a href="" name="storyItemComments_66" class="commentWrite">Comment</a>

There is also:

<div class="storyItemComments" id="storyItemComments_66" style="display:none;">....

For some reason this is not working:

$(".commentWrite").live("click",function(){
    cmt2open = $(this).attr('name');
    $("#" + cmt2open).show();
    return false;
});

Any ideas? The only thing I can think of is that it has something to do with the fact that I am using jQuery AJAX to load in the content which the LIVE statement above is referencing....

thanks

Answer 1

on most occasions people should use the die() function before the live... so that will clear any previews instructions and that function is only triggered once...

another thing could be that the instructions are called before the contents are retrieved from the ajax. therefore you should use .success to check if the ajax was successfully loaded and then trigger the click instructions.

as it seems that the <div id="storyItemComments_66" has not been picked up from the DOM.

Answer 2

Can you place your javascript inside;

$(document).ready(function(){
  //your code here
});

Not sure this will fix it but it's good practice I find.

Also have you alerted out your variables to see what you get?

What is the error you are getting if any?

Have you tried putting an alert at the top of the function to see if the click event works?

edit

let me know if the above does not fix it and I'll remove this answer to clear out the noise

Answer 3

Following from your comment to this answer

Can you try the following instead of show()?

$("#" + cmt2open).attr('display', 'block');