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的click事件中排除img，所以任何想法都该怎么做？

我试过了：

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

...但它不起作用，我不知道如何在.not()代码中添加.on()

Answer 1

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

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

API：http://api.jquery.com/on/

你可以试试这个：

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

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

});

Answer 2

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

这比根据Tats_innit的答案过滤结果更清晰。

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

我正在使用jQuery 1.11.0。

Answer 3

确保目标匹配：

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

    // Do stuff
});

Answer 4

这样做的重点是处理尚未包含在.sch_Remove中的元素的事件。

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

为了防止在单击img时触发父点击操作，请添加以下内容（除上述功能外）。

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

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