Javascript 我们应该在自调用函数（IIFE）中使用$（document）.ready（）将事件绑定到HTML元素吗

我混淆了两种实现方式：-

 - **FIRST**
// A self invoking function
selfFunction = (function(){

     $(document).ready(function(){        
          applyBindings();
      });

     applyBindings = function(){           
        $("#btnSubmit").on("click",function(){//Do Something});
        .....
        .....
        .....
        //More Bindings
     };
})();


- **SECOND**
 // A self invoking function
 selfFunction = (function(){

      applyBindings();      

      applyBindings = function(){           
        $("#btnSubmit").on("click",function(){//Do Something});
        .....
        .....
        .....
        //More Bindings
      };
})();

唯一的区别是，在第一种情况下，我使用$（document）.ready（）绑定事件。在第二个例子中，我在一个自调用函数中调用一个函数

---

两者都在完成工作，但我想知道应该遵循哪一个以及为什么？？？

区别在于使用

$（document.ready（callback）

即使在呈现应用绑定的元素之前加载了js文件（导致执行IIFE），也可以工作。（可能是因为页面结构复杂，图片加载速度慢或类似的原因）

顾名思义，

$（document）.ready（callback）

，可以保证函数在文档关闭之前不会运行。。准备好的例如，您可以确保id为

btnSubmit

的元素存在。（假设它是原始HTML的一部分，即，不是在代码的其他地方动态创建的）

明确地说，这

$("#btnSubmit")

是它可能发生故障的部分。因为如果按钮还不存在，那么在按钮存在之前单击肯定不会出现也没关系。由

$（“#btnSubmit”）

（即

.on（“单击”，回调）

）后面的其余代码指定的事件侦听器将不会应用于按钮，因为没有按钮（尚未）

---

因此，

$（document）.ready（callback）

版本在更多情况下更安全。

自调用函数与此无关。使用它们的目的是创建一个作用域环境，这样您就可以使用

var

创建一组变量，以避免污染全局作用域。您没有使用

var

，因此所有变量最终都会成为全局变量。第二个示例不起作用。在为其赋值之前，可以调用

applyBindings

。它应该抛出一个错误，因为

undefined

在您调用它时未声明。@nishaant-sharma。你能澄清一下你的问题的答案是什么吗？据我所知，我已经回答了你的问题。你可能已经有了另一个（某种）答案了吗？我只是好奇。我正在使用事件委托来绑定事件，这样id存在问题就不会成为问题。我明白了，但在更一般的情况下，我仍然怀疑我的答案是为什么常见（并且更喜欢）看到

$（document）.ready（callback）

实现（即使在特定情况下它是多余的）.我现在认为，事件委派（如果您的意思是回调直到单击事件之后才收到调用）可能无法拯救您。我已经更新了我的答案。