jQuery.on('点击'..事件只触发一次

我已经搜索这个答案一段时间了，但仍然没有找到。

我有一个动态生成的Instagram订阅源，其中一个高亮图像两侧有两个缩略图（上一个图像和下一个图像）。

看看：http://dandelionflowershop.com/index.php/website（滚动至底部，显示Instagram订阅源）。

如果用户单击以使转盘移动到下一个图像，则右侧的图像会通过更改到下一图像来正确响应。这是正确的。它每次都应该这样做，但问题是它只激活一次，而不是无限期。我认为这与$（'document'）.ready（）函数有关，但我真的不知道如何使它正常工作。

为什么它只工作一次？我怎样才能让它持续工作？

我需要AJAX或更复杂的东西来实现这一点吗？

这是我的代码（JQuery在结束标记之前的底部。：

<!-- 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>

我真的很感激你的真知灼见！非常感谢！