Why is Jquery only responding to first element? - php

Question

I have comment on my site, that have a reply button. When the reply button is hit a new text box pops up and allows the user to reply to the comment.
For some if there is more than one comment on a page, the reply link only works for the comment at the bottom of the other comments. Essentially the first comment in a list of more than one.
I'm pretty certain is has to do with my click function class.
Here is my html and php structure:
<a name='reply_form_<?php echo $airwave_comment_row['id']; ?>' style="clear:both"></a>
<div id='reply_to_<?php echo $airwave_comment_row['id']; ?>' class="respond_structure_future" <?php if(isset($_GET['reply_to']) && $_GET['reply_to'] == $airwave_comment_row['id']) { echo 'style="display:block;"';}else{ echo 'style="display:none;"';} ?>>
<div class="response_polaroid_future">
<a href="http://www.cysticlife.org/Profile.php?id=<?php// echo $auth->id; ?>">
<img src="/styles/images/prof_thumbnail_2.jpg" />
</a>
</div>
<?php
echo validation_errors();
echo form_open('community/insert_airwaves_comments_replies/'.$this->uri->segment(3));
?>
<div class="respond_body_future">
<div class="response_arrow_future"></div>
<div class="response_tail_future"></div>
<div class="respond_data_future">
<?php
$data = array('name' => 'airwaves_comments_replies', 'id' => 'reply_to'. $airwave_comment_row['id'].'_textarea', 'class' => 'respond');
echo form_textarea($data, set_value('airwaves_comments_replies'));
$data = array('type' => 'hidden', 'name' => 'comment', 'value' => $airwave_comment_row['id']);
echo form_input($data);
?>
<div class="respond_nevermind">
nevermind
</div>
<?php
echo form_submit('sub_comment_reply', 'Reply');
?>
</div>
</div>
</form>
</div>
jquery:
<script type="text/javascript">
$(document).ready( function() {
$('.scroll').localScroll({ offset:{top:-0,left:0} });
$("a.reply_link").click( function() {
$("#"+$(this).attr('name')).fadeIn('slow');
});
$(".respond_nevermind a").click( function(event) {
event.preventDefault();
var reply_box = document.getElementById($(this).attr('href'));
$(reply_box).css('display','none');
var reply_textarea = document.getElementById($(this).attr('href')+"_textarea");
$(reply_textarea).val('');
});
});
</script>
Thanks in advance.

Answer 1

The click event handler is bound to the initial existing elements but dynamically created elements are not bound.
Try using live() or on() to bind dynamically created elements.