jQuery擴展jQuery的功能動態加載的內容

我有問題，通過使用.html（）和.on（）方法替換div的內容後調用jQuery函數。在我訪問了很多頁面之後，我確定這個問題是由錯誤地使用.on（）方法引起的，但我無法弄清楚什麼是錯誤的。問題是加載html內容後，jQuery UI滑塊不起作用。我認爲解決方案可能非常簡單，但我無法找到正確的答案，而有數百人遇到類似問題。jQuery擴展jQuery的功能動態加載的內容

我使用一個div元素作爲body來顯示其他div元素的內容。

<body> 

<a href="#" content="#div1">load content</a> 

<div id="body">static content with working UI slider 
<div class="slider"></div> 
</div> 

<div id="div1">loaded content where the UI slider is not working 
    <div class="slider"></div> 
</div> 

</body>

我用這個jQuery代碼動態加載HTML內容（和滑塊）

$(".slider").slider(); 

$("body").on("click", "a", function(event) { 

event.preventDefault(); 

var htmlContent = $($(this).attr("content")).html(); 

$("div#body").html(htmlContent); 


});

碼上可以找到：http://jsfiddle.net/zTRFj/1/

來源

2013-01-18 Joppe Ambtman

你序列化HTML，所以老元素全部銷燬，然後在新位置重新構建。

而不是調用.html()來獲取HTML作爲字符串，請致電.contents()。這將返回實際的元素，並將保留任何綁定的事件和引用：

$(".slider").slider(); 

$("body").on("click", "a", function(event) { 
    event.preventDefault(); 

    var htmlContent = $($(this).attr("content")).contents(); 

    $("div#body").html(htmlContent); 
});

來源

2013-01-18 17:56:42

非常感謝您的快速回答，問題解決了！ –

jQuery擴展jQuery的功能動態加載的內容

回答

相關問題