如何在jQuery中修改HTML時刷新對象？

Question

我有jQuery的內容的頁面加載，在div之一將是一個滑塊

$('#slides').slides({ 
      preload: true, 
      preloadImage: 'img/loading.gif', 
      play: 6000, 
      pause: 2500, 
      hoverPause: true, 
      slideSpeed: 1000, 
      animationStart: function(current){ 
       $('.caption').animate({ 
        bottom:-35 
       },100); 
      }, 
      animationComplete: function(current){ 
       $('.caption').animate({ 
        bottom:0 
       },200); 
      }, 
      slidesLoaded: function() { 
       $('.caption').animate({ 
        bottom:0 
       },200); 
      } 
     }); 
    }); 

目前，HTML的結構是這樣的：

<div id"content"> 
    <div id="slider"></div> 
</div> 

我使用了我的頁面設置jQuery的，當用戶點擊一個鏈接，它會在該網頁的內容。如果用戶可以追溯到豪加載到#content

var homepage = $("#content").html(); 
$("#content").load("myContent.html"); 

我只是：

$("#content").html(homepage); 

但是然後$('#slides').slides();不再工作。

我該如何解決這個問題？

SlidesJS

Answer 1

您可以使用​​的complete來檢查您的內容是否有#slider。如果有，請再次初始化您的slides插件。

var homepage = $('#content'), 
options = { 
    generateNextPrev: true, 
    play: 1000 
}; 
$('#slides').slides(options); 

// Button click or something 
$('#content').load('myContent.html', function(response, status, xhr) { 
    if ($(response).find('#slider').length > 0) { 
     $('#slides').slides(options); 
    } 
}); 

編輯：

我是在製造的jsfiddle證明，但的jsfiddle是具有服務器的問題，所以我做了一個演示codepen。 http://codepen.io/Vestride/pen/LicKd。調用插件再次爲我工作（雖然我只是用.html()替換內容來模擬AJAX請求）。

Answer 2

試試這個，在功能

認沽滑塊，

function SliderCode() 
{ 

$('#slides').slides({ 
      preload: true, 
      preloadImage: 'img/loading.gif', 
      play: 6000, 
      pause: 2500, 
      hoverPause: true, 
      slideSpeed: 1000, 
      animationStart: function(current){ 
       $('.caption').animate({ 
        bottom:-35 
       },100); 
      }, 
      animationComplete: function(current){ 
       $('.caption').animate({ 
        bottom:0 
       },200); 
      }, 
      slidesLoaded: function() { 
       $('.caption').animate({ 
        bottom:0 
       },200); 
      } 
     }); 
    }); 
} 

重新設置hompage callslider功能後，

$("#content").html(homepage); 
SliderCode(); 

我因此未測試的代碼。希望它能起作用。