如何委托查询功能

Question

我有以下网页：link to page。如果你去“Galería”部分，你可以在左侧看到一张照片滑块和一个菜单。滑块上的每个图像都是可点击的，如果单击，则用您刚刚单击的照片填充空白区域。

直到那里。

问题在于，当你想改变部分时（在左边，菜单上写着“Nuestra tienda 2011”，“Mayo 2012”），假设我所做的是改变 ul <的内容/ b>底部的画廊。

为此，我写了这段代码：

<div id="lista_galerias">
            <ul>
                <li><div id="nuestra_tienda_show">Nuestra tienda 2011</div>
                    <script type="text/javascript">
                        $('#nuestra_tienda_show').click(function()
                        {
                            $('.jCarousel').html('');
                            $('<ul><li><div id="clickable"><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." width="100" height="100"></img></div></li></ul>')
                                .prependTo('jCarousel');
                            $('#galeria_seleccionada').html('Nuestra tienda 2011');
                        });

                    </script>
                </li>
                <li><div id="mayo_2012_show">Mayo 2012</div>
                    <script type="text/javascript">
                        $('#mayo_2012_show').click(function()
                        {
                            $('.jCarousel').html('');
                            $('<ul><li><div id="clickable"><img src="img/Mayo_2012/img1.jpg" alt="" width="100" height="100"></img></div></li></ul>')
                                .prependTo('.jCarousel');
                            $('#galeria_seleccionada').html('Mayo 2012');
                        });

                    </script>
                </li>
            </ul>
        </div>

和jCarousel div：

<!-- DIV Contenedor de la imagen de la galería -->
        <div id="containerGaleria">
            <div id="containerImage"></div>
        </div>
        <!-- DIV Contenedor de la galeria de imágenes -->
        <div class="container_carousel">
            <div class="jCarousel">
                <ul>
                    <li><div id="clickable"><img src="img/Escaparates_2011/img1.jpg" alt="1" width="100" height="100"></div></li>
                    <li><div id="clickable"><img src="img/Escaparates_2011/img2.jpg" alt="2" width="100" height="100"></div></li>
                    <li><div id="clickable"><img src="img/Escaparates_2011/img3.jpg" alt="3" width="100" height="100"></div></li>
                </ul>
            </div>
            <button class="prev"><<</button>
            <button class="next">>></button>
        </div>

如您所见，我有一个包含jCarousel的 div ，另一个包含修改此jCarousel div内容的部分列表。

所以我怀疑：

我想也许当我擦除jCarousel的html内容时，由于某种原因它不会重新加载jCarousel效果，它显示......好吧，作为没有属性的普通列表。如何重新加载jCarousel列表以查看第一次加载页面时的情况？

编辑：我添加了这个：

$('#nuestra_tienda_show').click(function()
    {
        $('.jCarousel').html('');
        $('<ul><li><div id="clickable"><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." width="100" height="100"></img></div></li></ul>')
            .prependTo('.jCarousel');
        $('#galeria_seleccionada').html('Nuestra tienda 2011');
                            $('.jCarousel').jCarouselLite({
                                btnNext: ".next",
                                btnPrev: ".prev"
                           });
                        });

但是，我的名单没有出现。即使我只添加

$('.jCarousel').jCarouselLite();

Answer 1

我无法访问该页面，但似乎您错过了对.jCarousel的调用 当您删除轮播的所有内容（$（'。jCarousel'）。html（''）;）并添加新内容时，jcarousel的所有事件和所有内容都会消失。所以：

<script type="text/javascript">
    $('#nuestra_tienda_show').click(function()
    {
        $('.jCarousel').html(''); // Here, you loose all jcarousel events, etc
        $('<ul><li><div id="clickable"><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." width="100" height="100"></img></div></li></ul>')
         .prependTo('jCarousel'); // this element is unknown to jcarousel
        $('.jCarousel').jCarousell(); // Initialize the carousel again
        $('#galeria_seleccionada').html('Nuestra tienda 2011');

    });
</script>