Question

这两个代码之间有什么区别？

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

和

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

我花了很长时间才弄清楚为什么我想关闭一个模态窗口。当我使用第一个例子中显示的代码时它可以工作，第二个代码没有，但我不明白为什么。

Answer 1

在你的第一个例子中，你要点击事件来记录，而不是模态窗口本身。您的第一个代码块工作原因是因为即使您以后动态添加元素它也能正常工作。如果您希望第二个代码块也能正常工作，那么在尝试添加click事件之前，您需要确保已经完全加载了HTML。

查看.on() documentation

我自己想的方法是你的第一个代码块将把click事件放在整个文档上。

每次点击某个地方时，都会尝试进行匹配点击了元素。
如果你随机点击某个地方它就不会启动功能，但是如果你单击.close_modal_window，它将在选择器上找到匹配项并启动你所拥有的功能。

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

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

同样在这种情况下，如果添加更多具有相同名称的类，除非再次运行这部分代码，否则它将无法工作，因此如果您计划添加具有相同类的更多HTML元素并且单击，则必须小心正在努力

Answer 2

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

Answer 3

以上是按钮的点击事件的两个示例：

<button>click me</button>

看看差异。

这是一个代表团的例子：

http://jsfiddle.net/xtz1np6d/

这里没有代表团：

http://jsfiddle.net/ketme18a/

正如您所看到的，在创建函数时，在上下文中创建的元素不会被创建，为此，它们不会分配任何函数。

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

但要小心，有一次我使用了事件委托，它在iPad上粉碎了我的niceScroll-plugin。

Answer 4

first如果你有像
那样编写的静态html，它就有效
<div id="divID">My div</div>

second如果您制作/创建动态html，就可以了   var myDiv ='<div id="divID">My div</div>'
   然后你将它添加到像
这样的元素中
$('#someid').append(myDiv )
  第二种方法称为event delegation

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

4 个答案: