-1

我有一组 jQuery 事件，我想在加载它自己的DOM 对象时执行，例如：

 $("#div1").on('click',function(){ /* Stuff one*/ }); //#div 1 must exist
 $(".div2").on('click',function(){ /* Stuff two */}); //all objects with div 2 class must exist

下一个代码有效，尽管整个 DOM 太大（它是一个SPA 网站）并且需要等待一段时间：

$(function(){
     $("#div1").on('click',function(){ /* Stuff one*/ }); //#div 1 must exist
     $(".div2").on('click',function(){ /* Stuff two */});  //all objects with div 2 class must exist
});

我想试试这段代码，但事件 .load() 已从 jQuery 1.8 中弃用：

$("#div1").on('load',function(){
  $(this).bind('click',function(){ /* Stuff one*/ }); //#div 1 must exist
}
$("#div2").on('load',function(){
  $(this).bind('click',function(){ /* Stuff two*/ }); //all objects with div 2 class must exist
}

请问有谁知道如何使用未弃用的代码来产生相同的效果？:)

4

1 回答 1

1

您始终可以使用原生并script在要加载的 DOM 的每个部分之后插入您的元素。如果script元素位于您即将被操作的 DOM 之后，那么您可以确定在页面的该点之前的所有 DOM 都已经构建并运行。

您也可以使用事件委托并将处理程序附加到您的文档中，尽管我不建议这样做，特别是如果它是一个反复出现的问题。文档上的委托事件过多会影响性能。

根据我们在评论中的对话，您的代码可能类似于：

<body>
    <!-- HTML to be manipulated -->
    <script>
        require(['my-script'], function(myScript) {
            myScript.init(); // initialize DOM manipulation and attach event handlers
        });
    </script>
    <!-- More HTML -->
</body>

我的脚本.js：

define(function(require, exports, module) {
    // Your code..
    exports.init = function() {
        // Initialize DOM
    };
    // Your code..
});
于 2013-04-01T23:08:47.187 回答