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的功能动态加载的内容

回答

相关问题