jQuery .on（'click'...事件仅触发一次

Question

I've been searching for this answer for a while, but still no luck.

I have a dynamically generated Instagram feed with one highlight image flanked by two thumbnails (previous image and next image).

Take a look: http://dandelionflowershop.com/index.php/website (scroll to the bottom where it shows the Instagram feed).

If a user clicks to make the carousel move to the next image, the image to the right responds correctly by changing to the next image. That's correct. It should do this every time, but the PROBLEM is that it only activates ONCE, rather than indefinitely. I assume this has something to do with the $('document').ready() function, but I'm really at a loss as to how to make this work properly.

Why does it only work once? How can I get it to work continuously?

Do I need AJAX or something more complex to achieve this?

Here is my code (the JQuery is at the bottom before the closing tag.:

<!-- Instagram Area -->
            <?php $instagram_array=array(); ?>
            {exp:ig_picpuller:media_recent user_id="1"}
            <?php $instagram_array[] = '{ig_low_resolution}'; ?>
            {/exp:ig_picpuller:media_recent}
            <?php $instagram_count = 0; ?>


        <div id="instagram_wrapper">
        <?php
        $instagram_count_prev = 9;
        $instagram_count_next = 1;
        $ig_next_img = $instagram_array[$instagram_count_next];
        ?>

            <div class="instagram_label left">
                <img class="left" src="{img}logo_instagram.png" />
                Instagram<br />
                <b>dandelionflowers</b>
            </div>

            <div class="instagram_thumb_left">
                <img id="insta_prev" class="width100" src="<?php print $instagram_array[$instagram_count_prev]; ?>">
            </div>

            <div class="instagram_thumb_right right">
                <img id="insta_next" class="width100" src="<?php print $instagram_array[$instagram_count_next]; ?>">
            </div>


            <div class="instagram_frame">

                <div id="instagram_carousel" class="carousel slide carousel-fade" data-interval="false">
                <!-- Carousel items -->
                    <div class="carousel-inner">
                        {exp:ig_picpuller:media_recent user_id="1"}
                            <div class="item slides instagram_highlight">
                                <img src="{ig_standard_resolution}">
                                <div class="instagram_info">
                                    <img src="{img}heart.png" />{ig_likes}<br />
                                   <img src="{img}comment.png" />{ig_caption}
                                </div>
                            </div>
                        {/exp:ig_picpuller:media_recent}
                    </div> 

                <!-- Carousel nav -->
                <a class="carousel-control left highlight_style instagram_nav_prev" href="#instagram_carousel" data-slide="prev">&lsaquo;</a> 
                <a class="carousel-control right highlight_style instagram_nav_next" href="#instagram_carousel" data-slide="next">&rsaquo;</a>
                </div> <!-- #instagram_carousel -->

            </div> <!-- .instagram_frame -->

        </div>


       <div class="clear">
       <br /><br />
       Array Information:<br />
        <?php print_r($instagram_array); ?>
        </div>

    </div> <!-- .page_wrapper -->


<!-- Bootstrap JQuery-->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="{template_root}bootstrap/js/bootstrap.min.js"></script>
<!-- Dandelion Javascript -->
<script type="text/javascript" src="{template_root}site_script.js"></script>
<script>

    $('.instagram_nav_next').on('click', function() {
        <?php $instagram_count_next++;
        $ig_next_img = $instagram_array[$instagram_count_next]; ?>
        $('#insta_next').attr('src', '<?php print $ig_next_img; ?>');
    });

</script>

I really appreciate any insight! Thank you so much!

Answer 1

I looked the website. if $instagram_array is the array printed in that site, then

you want to change this <?php print $ig_next_img; ?> <?php print $ig_next_img; ?> to something like:

var i=0;
$('.instagram_nav_next').on('click', function() {        
    <?php $instagram_count_next++;
    $ig_next_img = $instagram_array[$instagram_count_next]; ?>
    $('#insta_next').attr('src', $instagram_array[i];);
    i++;
});