jQuery 扩展 jquery 函数以动态加载内容
Posted
技术标签:
【中文标题】jQuery 扩展 jquery 函数以动态加载内容【英文标题】：jQuery extending jquery functions to dynamically loaded content 【发布时间】：2013-01-18 17:53:38 【问题描述】：在使用 .html() 和 .on() 方法替换 div 的内容后，我在调用 jQuery 函数时遇到问题。 在我访问了很多页面之后，我确定问题是由于以错误的方式使用 .on() 方法引起的，但我无法弄清楚出了什么问题。问题是 jQuery UI 滑块在加载 html 内容后不起作用。我认为解决方案可能很简单，但是当有数百人遇到类似问题时，我就是找不到正确的答案。
我使用一个 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/
【问题讨论】：
【参考方案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 函数以动态加载内容的主要内容，如果未能解决你的问题，请参考以下文章