Question

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

 $("#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 web）并且它需要等待一段时间：

$(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
});

我想尝试使用此代码，但the event .load() is deprecated from 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
}

有人知道如何使用不推荐的代码激发相同的效果吗？：）

Answer 1

您可以随时使用本机并在要加载的DOM的每个部分之后插入script元素。如果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>

MY-的script.js：

define(function(require, exports, module) {
    // Your code..
    exports.init = function() {
        // Initialize DOM
    };
    // Your code..
});

jQuery Events仅在加载整个DOM时起作用

1 个答案: