Question

在使用.html（）和.on（）方法替换div的内容后，我遇到了调用jQuery函数的问题。在我访问了很多页面后，我确定问题是由于以错误的方式使用.on（）方法引起的，但我无法弄清楚是什么问题。问题是加载html内容后jQuery UI滑块无法正常工作。我认为解决方案可能非常简单，但是当有数百人遇到类似问题时，我找不到正确答案。

我使用一个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/

Answer 1

您正在序列化HTML，因此旧元素都会被销毁，然后在新位置重建。

不要调用.html()将HTML作为字符串，而是调用.contents()。这将返回实际的元素，并将保留任何绑定的事件和引用：

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

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

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

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

jQuery将jquery函数扩展为动态加载的内容

1 个答案: