Как обрабатывать делегированное событие только для дочерних элементов? - PullRequest
Новая
       14

Как обрабатывать делегированное событие только для дочерних элементов?

8 голосов
/ 29 марта 2012

При делегировании событий с использованием .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");

Вот почему я прошу селектор, а не исправление.

Ответы [ 4 ]

6 голосов
/ 29 марта 2012

Вы можете проверить в обработчике, является ли элемент дочерним по отношению к элементу, которому был делегирован обработчик события; 

$(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");
2 голосов
/ 24 июля 2013

Это сработало для меня. 

$('#container').on('click', '> .children', function(){
...
})
2 голосов
/ 29 марта 2012

Один из способов делегировать только события, инициируемые на прямых дочерних элементах, - предоставить полный селектор для on(), включая часть, соответствующую родительскому элементу: 

$(selector).on("event", selector + " > *", handler);
0 голосов
/ 29 марта 2012

Все, что вам нужно, это: 

childSelector = "*";

, если предполагается, что он соответствует любому дочернему элементу селектора.Он ищет только в области селектора.

...