Why is Jquery only responding to first element?

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">
                    <a href="reply_to_<?php echo $airwave_comment_row['id']; ?>">nevermind</a>
                </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.

I don't see any anchor tags with the class reply_link? The php code might be generating it? — obimod, Jul 30 '13 at 21:54
Could you paste the view-source after the page is loaded in a browser? — obimod, Jul 30 '13 at 21:55
Looks like your form_textarea method might be the culprit. It really depends on what you're generating from the php code though. -1 not enough information (unclear) — obimod, Jul 30 '13 at 22:02
Going on a bike ride... will remove the demotion upon your posting the client-side code which is more clear than the above server-side code upon my return — obimod, Jul 30 '13 at 22:04
@obitusis I'm more than happy to do that, but I'm not sure exactly what your wanting. Please let me know what else you may need to see for you to be able to help. Thanks. — LightningWrist, Jul 30 '13 at 22:24
@LightningWrite go to the webpage where the javascript is breaking. Press option-cmd-U or go to View > View Source to display the actual HTML which is breaking. Paste that HTML up there with your question to display the DOM structure which is breaking the JavaScript (or the other way around, perhaps). PHP generates this stuff. Showing the code that generates it is only useful if you have all the code. I don't see the form_* methods in your PHP code which I assume generates some of the problematic code. — obimod, Jul 30 '13 at 22:26
@obitusis That's the problem. Is it's not generating anything. When the reply link is hit anywhere other than the last comment it just simply puts the reply form id in the url as it should, but does not open the text box: /profile/228#reply_form_17 — LightningWrist, Jul 30 '13 at 22:31
"When the reply link is hit..." navigate in your browser to where that happens, view the sourcecode, and paste that up there. Now that your talking about hash links... what code processes those? Back-end? Front-end? Perhaps lot more is at play here than what first appears... navigation system? Hash javascript listeners? — obimod, Jul 30 '13 at 22:36
@TanvirChowdhury below might be right if those hash tags are generating AJAX calls to the server — obimod, Jul 30 '13 at 22:37

score 0 · Answer 1 · answered Jul 30 '13 at 21:54

0

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.

answered Jul 30 '13 at 21:54

tchow002

1,068
6
8

1

it's php... i don't think his elements are being created on the fly. – obimod Jul 30 '13 at 21:55
I see. I think I misunderstood. Then I would have to think that the classes for the subsequent reply_links are named differently. – tchow002 Jul 30 '13 at 21:58
is that the fade-in? that wouldn't be dynamic, just animated – obimod Jul 30 '13 at 21:58
So how would you suggest I make it dynamic per id? – LightningWrist Jul 30 '13 at 22:22
Instead of using `click` use `on`. Like : `$(".respond_nevermind a").on("click", function(event) { } );` I'm not even sure that is going to solve your problem though. You need to provide more information. – tchow002 Jul 30 '13 at 23:34
@Tanvir Chowdhury what info do you need? – LightningWrist Jul 31 '13 at 16:01

Why is Jquery only responding to first element?

1 Answers1