Question

我正在尝试在点击div时将一些html附加到页面，然后当点击页面的任何其他部分时（除了新附加的div和单击附加它的div）删除附加的div。出于某种原因，我的:not()选择器无法按照我的预期运行。

 $("*").on("click", "body:not(._tlh_dropdown, ._tlh_dropdown_content)", function () {
   // ... remove previously attached div
});

http://jsfiddle.net/qUHAB/5/

除了两个课程_tlh_dropdown和_tlh_dropdown_content之外，如何点击任何内容时如何删除此div？

Answer 1

嗯：

$("*").on("click", "body:not(._tlh_dropdown, ._tlh_dropdown_content)", function () {

几乎肯定不是你想要的。这会为页面上的每个元素添加一个事件处理程序，要求它检查来自<body>的事件是否已经冒泡。它没有任何意义。

和

$("body").on("click", "*:not(._tlh_dropdown, ._tlh_dropdown_content)", function () {

在您的测试页中会出现问题，因为<body>中没有其他内容，只有您的标题。

将其更改为上面的第二个内容（就像在原始问题中一样），然后在其中的内容之后添加一个带有一些文本的<div>，然后单击其中。或者，将其更改为：

$(document).on("click", "*:not(._tlh_dropdown, ._tlh_dropdown_content)", function () {

并且会抓住从<body>冒出的事件。

编辑 - 如果你选择$(document)，它也是一个好主意（特别是如果你想让它工作:-)将“事件”参数添加到处理程序函数，并在每个函数中调用

event.stopPropagation();

在第一个事件处理程序（打开额外内容的处理程序）中，这将阻止第二个处理程序在标题上的“单击”冒泡到正文时运行。对于第二个处理程序，停止传播并不重要，但它可以避免多次尝试关闭添加的内容。

再编辑 - 请参阅下面的评论; “关闭”处理程序有一些细微之处，使用“on”选择器方法实现它有点问题。

jquery *：not（）没有按预期选择括号中的所有内容

1 个答案: