1

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

我使用一个 div 元素作为主体来显示其他 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/

4

1 回答 1

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);
});
于 2013-01-18T17:56:42.663 回答