jQuery 加载最佳实践答案

【问题标题】：jQuery load best practicejQuery 加载最佳实践
【发布时间】：2012-04-01 19:45:08
【问题描述】：

我有一个关于 jQuery 加载最佳实践的问题。想象一下以下情况：

$("#div").on('click', function() {
$('#result').load('test.html');
});

代码工作正常，加载方法执行，但现在加载的内容不能被 jQuery 插件访问。我是这样解决的：

$("#div").on('click', function() {
$('#result').load('test.html', function(){
$('.element').plugin();
});
});

我的问题很简单，有没有更好的方法来解决这种情况？

【问题讨论】：

是的。使用$.on()。虽然我不太确定“无法访问”是什么意思 - 插件在加载后可以像任何其他元素一样访问它。

标签： jquery jquery-load

【解决方案1】：

理想情况下，您需要将元素的parent 定位为id="div" ...在此示例中假设容器<div id="wrap">。然后使用.on() 使用parent 容器作为选择器，如：

$("#wrap").on("click", "#div", function() {
 $('#result').load('test.html');
});

然后你的其他插件可以访问加载的内容。

这种使用.on()的格式实际上取代了自jQuery v1.7.x以来的.live()。

最终，你也可以这样做

$("body").on("click", "#div", function() {
 $('#result').load('test.html');
});

【讨论】：

【解决方案2】：

您正在以正确的方式进行操作。您调用插件方法的代码将仅在加载完成加载到 div 后执行。所以你很高兴。

也许您可以将所有代码包装在 document.ready 中，以确保仅在 dom 完成加载后执行。

$(function(){
     $("#div").on('click', function() {
        $('#result').load('test.html', function(){
           $('.element').plugin();
         });
      });    
});

【讨论】：