Question

使用.on委派事件时如何定位子元素：

我尝试过：childSelector =

>*
>:nth-child(n)

但是当我从>开始时，没有选择任何内容。

$(selector).on(event, childSelector, handler);

有时我想针对一个直接的孩子，有时我不会:(伪代码）

var func = function(selector, subSelector) {
    $(selector).on("click", subSelector, function() {
        alert("my subSelector is clicked");
    });
}

func("#wrapper", "direct-child-selector");
func("#wrapper", ".some .other > .selector:first");

这就是为什么我要求选择器而不是修复。

Answer 1

你可以在处理程序中检查该元素是否是委托给事件处理程序的元素的子元素;

$(selector).on("event", '*', function (e) {
    if (e.target.parentNode === e.delegateTarget) {
        // Woo!
    }
});

见e.delegateTarget。值得注意的是e.delegateTarget是在jQuery 1.7中引入的，因此不适用于旧版本。

关于你的第二次编辑，在它的当前形式中，选择器是不明确的;在代码和当前形式中，您无法检测传递的选择器是否仅用于子选择器。您可以引入另一个参数来指示它是否只是一个仅限子项的选择器，或者将>添加到选择器的开头（例如）并检查它;

var func = function(selector, subSelector, isChild) {
    $(selector).on("click", subSelector, function(e) {
        if (isChild && e.parentNode == e.delegateTarget || !isChild) {
             alert("my subSelector is clicked");
        }
    });
}

func("#wrapper", "direct-child-selector", true);
func("#wrapper", ".some .other > .selector:first" /* , `false` is optional */);

或者：

var func = function(selector, subSelector) {
    if (subSelector.charAt(0) === '>') {
        subSelector = selector + subSelector;
    }

    $(selector).on("click", subSelector, function(e) {
        alert("my subSelector is clicked");
    });
}

func("#wrapper", "> direct-child-selector");
func("#wrapper", ".some .other > .selector:first");

Answer 2

仅委派在直接子项上触发的事件的一种方法是为on()提供完整的选择器，包括与父元素匹配的部分：

$(selector).on("event", selector + " > *", handler);

Answer 3

这对我有用。

$('#container').on('click', '> .children', function(){
...
})

Answer 4

您只需要：

childSelector = "*";

如果它应该匹配选择器的任何子节点。它仅在选择器的范围内搜索。

如何仅处理子元素的委托事件？

4 个答案: