Как делегировать функцию запроса

Question

У меня есть следующая веб-страница: link to page. Если вы перейдете в раздел «Galería», вы увидите слайдер фотографий и меню с левой стороны. Каждое изображение на слайдере можно щелкнуть, и если вы нажмете, вы заполните пробел фотографией, которую вы только что нажали.

Исправить, если есть.

Дело в том, что, когда вы хотите изменить раздел (на левой стороне, в меню, которое говорит «Нуэстра Tienda 2011», «Mayo 2012»), supposely, что я делаю, это изменить содержание уль галереи на нижней стороне.

Для этого я написал этот код:

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

И в 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.

Так МОЯ Сомнения:

Я думаю, что, может быть, когда я стереть содержимое HTML в jCarousel, по какой-то причине не требуется перезагружать эффект jCarousel, и это показывает ... ну как простой список без свойств. Как я могу перезагрузить этот список jCarousel, чтобы увидеть, как при первом загрузке страницы?

EDIT: Я добавил это:

$('#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>