Javascript - $（document）.on（“click”，“selector”，function ...）之间的差异;和$（“selector”）。on（“click”，function ....）;

Question

这两个代码有什么区别？

$(document).on('click', '.close_modal_window', function(){ 
     alert("window closed"); 
    }); 

和

$('.close_modal_window').on('click', function(){ 
     alert("window closed"); 
    }); 

我花了很长的时间来找出为什么我希望能够关闭模式窗口。 当我使用第一个例子中显示的代码时，第二个代码不工作，但我不明白为什么。

Answer 1

在您的第一个示例中，您将单击事件放置到文档中，而不是模态窗口本身。您的第一个代码块工作原因是因为即使稍后动态添加元素，它也可以工作。如果您希望第二块代码也能正常工作，则需要确保在尝试添加单击事件之前已经完全加载了HTML。

退房.on() documentation

我想，这对我自己的方式是，你的代码的第一个块就是把点击整个文档事件。

• 每次你点击某处时，它会尝试做一个匹配，其中点击了其中的 元素。
• 如果随机点击某处，它不会触发功能，但如果您点击.close_modal_window，它将在选择器 上找到一个匹配，并启动您在那里的功能。

你的第二块代码做同样的事情，但不同的。

• 第二种方式更快，因为您不会在整个页面上单击每个 然后进行匹配。
• 它会将点击功能直接绑定到.close_modal_window，并且只有在点击它时才会启动 。
• 但是，为了这个工作，你必须已经在页面上有 .close_modal_window的HTML，然后运行这段代码。

而且如果您添加更多的类同名这种情况下，它不会，除非你再次运行的代码，这部分工作，所以你必须要小心，如果你打算添加具有相同的类和更多的HTML元素有点击工作

Answer 2

两者之间的区别在于，代码的第二个版本仅将click函数绑定到加载时位于页面上的close_modal_window类的元素。即使代码在页面加载后动态显示，代码的第一个版本也会将click动作绑定到页面上随close_modal_window类出现的任何元素。

Answer 3

first它的工作原理，如果你有，你写这样

<div id="divID">My div</div>

second它的工作原理，如果你做/创建动态HTML一样
var myDiv ='<div id="divID">My div</div>'
和静态HTML，那么你追加它在一些像

$('#someid').append(myDiv)
第二种方法叫做event delegation

Answer 4

以上两个例子与按钮的单击事件：

<button>click me</button> 

看的差异。

---

这里是委托一个例子：

http://jsfiddle.net/xtz1np6d/

这里一个无代表团：

http://jsfiddle.net/ketme18a/

---

正如你可以看到，元素dinamically创建，不在上下文中时该功能已创建，为此，他们没有任何功能分配。

---

我超级推荐这个演讲：Understanding Event Delegation

---

但要谨慎，有一次，我用事件委托和它的iPad粉碎了我的niceScroll的插件。