jquery - JQuery 使用 .on() 而不是选择器

Question

我正在使用具有以下语法的 .on() 函数：

$(".schemaTab").on("click", ".schema", function () {})

而不是.live()因为我正在.schema动态添加 div。那些 div 有这个代码：

<div class="schema" id="SCH_16">
   <img src="Img/btnRemove.png" class="ikona SCH_Remove" alt="Smazat" title="Smazat">
</div>

但是我需要从其父 div 的点击事件中排除 img，所以知道该怎么做吗？

我试过了：

$(".schemaTab").not(".SCH_Remove").on("click", ".schema", function () {})

...但它没有用，我不知道如何在代码.not()内部添加.on()

score 22 · Accepted Answer

.not() 不起作用，因为on方法将事件处理程序附加到 jQuery 对象中当前选定的元素集，并使用原始选择器来测试是否应该应用事件。

所以我认为在你的情况下选择然后过滤就可以了。

你可以试试这个：

$(".schemaTab").on("click", ".schema", function (e) {

    if (!$(e.target).is(".schemaTab")) {
         // not stuff in here
    }

});

score 10 · Accepted Answer

您实际上可以将:not选择器与.on方法一起使用，就像这样。

这是比根据 Tats_innit 的回答过滤结果更清洁的解决方案。

$('.schemaTab').on('click', '.schema:not(.booga)', function(event) {
  // Fun happens here
});

我正在使用 jQuery 1.11.0。

score 4 · Accepted Answer

只要确保目标匹配：

$('.schemaTab').on('click', '.schema', function(e) {
    if(!$(e.target).is('.schema')) {
        return;
    }

    // Do stuff
});

score 3 · Accepted Answer

这样做的全部意义在于处理尚未在 DOM 中的元素上的事件，其中包括您的 .sch_Remove。

$(".schemaTab").on("click", ".schema", function () {})

为了防止在单击该 img 时触发父单击操作，请添加以下内容（除了上面的函数）。

$(".schemaTab").on("click", ".SCH_Remove", function () { return false; })

这将阻止“点击”事件传播到父级并触发其 onclick 方法并阻止默认点击行为。

4 回答 4