Question

我的html文档如下所示：

<html>
 <head> .. load jquery and other stuff </head>
 <body>
   <div id="cool_container">
    <div class="cool">.. no script friendly markup ..</div>
   </div>
   <a id="cool_link">Link</a>
 <script>
    function installStuff(){
        $('.cool').coolPlugin();
        $('#cool_link').click(function(){
                $('#cool_container').load('/anothercooldiv.html');
        });
    }
    $(document).load(function(){ installStuff(); });
 </script>

 </body>
</html>

当然，/anothercooldiv.html会提供另一个<div class="cool"> .. etc ...</div>片段。

那么最好的方法是将新酷的div变成coolPlugin而不会破坏所有内容（并编写一些讨厌的黑客）？

能够：

会很棒

使用默认的jQuery上下文'#cool_container'调用installStuff，所以我可以调用类似的东西：

$.doThisInContext(function(){installStuff();}, $('#cool_container');

在load回调中。

或者，有一个相当于'live'（如果酷包含链接就可以解决链接问题），但是在元素存在时，我可以在我的函数installStuff中使用它：

$('.cool').exists(function(what){ what.coolPlugin() };

然后coolPlugin现在和将来都会安装在所有cool元素上。

Answer 1

我建议.livequery() plugin仍为此：

$(function() {
    $('.cool').livequery(function() {
      $(this).coolPlugin();
    });
    $('#cool_link').click(function(){
            $('#cool_container').load('/anothercooldiv.html');
    });
});

重要的一点：

$('.cool').livequery(function() {
  $(this).coolPlugin();
});

将在添加每个当前和未来.cool元素时运行，并在每个元素上运行插件。

Answer 2

将插件应用于新加载的ajax内容应该不会太棘手：

$('#cool_container').load('/anothercooldiv.html', function() {
   $(this).coolPlugin();
});

在jQuery隐式上下文中运行函数

2 个答案: