jquery - jQuery 加载最佳实践

Question

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

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

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

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

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

Answer 1

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

可能您可以将所有代码包装在 document.ready 中，以确保仅在 dom 完成加载后才会执行此操作。

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

Answer 2

理想情况下，您需要将parent元素的目标定位为id="div"......让我们说这个例子的容器<div id="wrap">。然后使用.on()容器parent作为选择器，如：

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

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

这种使用格式.on()实际上.live()从 jQuery v1.7.x 开始被取代。

最终，你也可以做

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