如何委托查询功能

Question

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

正确到那里。

事情是，当你想改变部分（在你的左边，菜单上写着“Nuestra tienda 2011”，“Mayo 2012”），假如我改变的内容是ul gallery在底部。

要做到这一点，我写了这个代码：

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

正如你所看到的，我有一个DIV包含的jCarousel，而另一一个带有修改此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>