如何重新加載JavaScript但不是頁面

Question

我有一個滑塊的問題。當我第一次加載我的網頁時，它會顯示帶有一些圖像的滑塊。我有一些鏈接來改變圖像顯示，所以當我點擊時，我想顯示爲其他的滑塊。問題是，當我點擊新鏈接時，它不使用jquery函數來格式化滑塊。

這裏我粘貼一些代碼，這樣你可以計算出：

<div class="contenidor_escaparates_2011"> 
    <div id="contenidor_slider" class="containerGaleria"> 
     <ul id="slideshow"> 
       <li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li> 
       <li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li> 
       <li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li> 
</ul> </div></div> 

然後jQuery的：

$(document).ready(function() 
{ 
    var timeout, manualMode = false, 

      $slideshow = $('#slideshow'), 
    $items = $slideshow.find('li').hide(), 
    total = $items.length, 
    getItem = function($item, trav) { 
     var $returnItem = $item[trav](); 
     return $returnItem.length ? 
      $returnItem : 
      $items[(trav == 'next') ? 'first' : 'last'](); 
    }, 

    showItem = function($currentItem, $itemToShow) { 
     var $itemToShow = 
      $itemToShow || getItem($currentItem,'next'); 

     $currentItem.fadeOut(300, function() { 
      $itemToShow.fadeIn(300, fadeCallback); 
     }); 
    }, 

    fadeCallback = function() { 
     if (manualMode) { return; } 

     var $this = $(this), 
      $next = getItem($this, 'next'), 
      num = $this.prevAll().length + 1; 


     // set the timeout for showing 
     // the next item in 5 seconds 
     timeout = setTimeout(function() { 
      showItem($this, $next); 
     }, 3000); 
    }, 

    handleBtnClick = function(e) { 
     clearTimeout(timeout); 

     manualMode = true; 

     var $currentItem = $items.filter(':visible'), 
      $itemToShow = getItem($currentItem, e.data.direction); 

     showItem($currentItem, $itemToShow); 
    }; 

    $items.eq(0).fadeIn(500, fadeCallback); 

}); 

這工作適合我第一次加載頁面，但是當我改變與此的內容：

<script type="text/> 
$('#nuestra_tienda_show').click(function() 
    { 
    $('.containerGaleria').html(''); 
    $('<ul id="slideshow"><li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li></ul> ') 
     .prependTo('.containerGaleria'); 
     $('#galeria_seleccionada').html('Nuestra tienda 2011'); 
     location.reload(); 
     }); 
</script> 

所以基本上，我做的是，在某個鏈接上的onclick（）事件後，我改變了div的html內容，但很明顯，它不使用jquery，因爲它一開始沒有加載。任何想法如何解決這個問題？

如果我使用location.reload（）;它顯示了第一項我裏面，所以它並沒有爲我工作...

編輯：
等待，我編輯的jsfiddle ...

Answer 1

你需要爲創建一個初始化的方法幻燈片和回憶，當你需要。

我想作嘔看到怎麼這個js設置，所以我會忽略它，並張貼我會如何處理它：

$(document).ready(function(){ 
    slideshow.init(); 

    $('#nuestra_tienda_show').on('click', function() 
    { 
     $('.containerGaleria').html(''); 
     $('<ul id="slideshow"><li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li></ul> ') 
     .prependTo('.containerGaleria'); 
     $('#galeria_seleccionada').html('Nuestra tienda 2011'); 
     slideshow.init(); 
    }); 
}); 

var slideshow = { 
    timeout: null, 
    manualMode: false, 
    total: 0, 
    init: function(){ 
     clearTimeout(this.timeout); 
     var items = $('#slideshow').find('li').hide(); 
     this.total = items.length; 
     items.eq(0).fadeIn(500, this.fadeCallback); 
    }, 
    getItem: function(item, trav) { 
     var returnItem = item[trav](); 
     return returnItem.length ? 
      returnItem : 
      items[(trav == 'next') ? 'first' : 'last'](); 
    }, 
    showItem: function(currentItem, itemToShow) { 
     var itemToShow = 
      itemToShow || this.getItem(currentItem,'next'); 

     currentItem.fadeOut(300, function() { 
      itemToShow.fadeIn(300, this.fadeCallback); 
     }); 
    }, 
    fadeCallback: function() { 
     if (manualMode) { return; } 

     var $this = $(this), 
      next = getItem($this, 'next'), 
      num = $this.prevAll().length + 1; 

     // set the timeout for showing 
     // the next item in 5 seconds 
     timeout = setTimeout(function() { 
      this.showItem($this, next); 
     }, 3000); 
    }, 
    handleBtnClick: function(e) { 
     clearTimeout(this.timeout); 

     this.manualMode = true; 

     var currentItem = items.filter(':visible'), 
      itemToShow = this.getItem(currentItem, e.data.direction); 

     this.showItem(currentItem, itemToShow); 
    }, 
    handleBtnClick: function(e) { 
     clearTimeout(this.timeout); 

     this.manualMode = true; 

     var currentItem = items.filter(':visible'), 
      itemToShow = this.getItem(currentItem, e.data.direction); 

     this.showItem(currentItem, itemToShow); 
    }; 
}; 

然後你只需調用slideshow.init()當你要重新評估幻燈片內容。

我沒有徹底審查過這個，但總的想法是將這個大量的變量鏈變成一個單一的js對象幷包含整個事情。

我不明白你爲什麼要在click函數中寫這樣的幻燈片內容。您正在擦除容器的html，創建元素，然後將它們預先放入容器並重復使用同一個字符串重複標題ID。爲什麼不直接將幻燈片的html設置爲新圖像？

$('#slideshow').html('<li><img src="img/Escaparates_2011/img1.jpg" alt="Dormitorio azul turquesa." /></li><li><img src="img/Escaparates_2011/img2.jpg" alt="Escaparate Agosto 2011." /></li><li><img src="img/Escaparates_2011/img3.jpg" alt="Escaparate Enero 2011." /></li><li><img src="img/Escaparates_2011/img4.jpg" alt="Escaparate Junio 2011." /></li><li><img src="img/Escaparates_2011/img5.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img6.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img7.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img8.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img9.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img10.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img11.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img12.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img13.jpg" alt="" /></li><li><img src="img/Escaparates_2011/img14.jpg" alt="" /></li>');