динамическое изменение селектора делегированного события

0

Я хотел бы изменить селектор "на лету" делегированного события.

jsFiddle DEMO

Например,

Я использую этот HTML:

<div id="div1">DIV1</div>
<div id="div2">DIV2</div>    
<textarea id="result"></textarea>

я делегировать событие click для всех DIV:

$(document).on("click", "div", function () {
    $("#result").append(this.id + ' DIV click\r\n');
});

Позже мне нужно развязать конкретный DIV. Я мог связать новое делегированное событие, исключая этот конкретный DIV, и отменить предыдущее делегированное событие. Однако, в моем случае, я хотел бы сохранить предыдущее событие как это и просто изменить селектор этого события, то есть изменить event.selector делегированного события "на лету".

Это событие:

var delegatedEvent = $._data(document, "events").click;

Так, пытаясь исключить DIV путем ориентации его атрибут ID (класс, и т.д...) работает, я могу использовать, например, для исключения #div2:

delegatedEvent[0].selector += ":not(#div2)";  // => selector == 'div:not(#div2)'

По какой-то причине я не могу настроить целевой элемент с помощью определенного атрибута, мне нужно использовать индекс элемента:

var indexDiv2 = $(delegatedEvent[0].selector).index($("#div2")); // => 1

Теперь попытка исключить # div2 с использованием его индекса не работает:

delegatedEvent[0].selector += ":not(:eq("+indexDiv2 +"))";  // => selector == 'div:not(:eq(1))'

Похоже, что сопоставленный набор переоценен (???), если я использую #div1 index (0), это исключает все DIV.

Я застрял здесь, нужно использовать индекс для таргетинга на определенный DIV, но не могу использовать его для изменения делегированного селектора событий.

Любая идея, как это исправить или какая-либо известная причина этого неожиданного поведения?

PS: я мог бы использовать собственный data-* (индекс data-), но все еще задавался вопросом, почему использование :eq() не работает...

  • 0
    Не будет ли в пуле только одного delegatedEvent[0].selector div из которого delegatedEvent[0].selector , так как только у одного delegatedEvent[0].selector div произошло событие? Таким образом :eq(0) и :first всегда верно?
  • 0
    но использование: $(document).on("click", "div:not(:eq(1))", handler) исключает второй DIV, так почему бы не изменить свойство селектора событий? Мне было интересно, чтобы селектор "div: not (: eq (1))" переоценивался при каждом вызове, и, похоже, это так
Теги:

1 ответ

1

Почему бы не обработать его динамическим классом?

$(document).on("click", "div:not(.exclude)", function () {
    $("#result").append(this.id + ' DIV click\r\n');
});

И просто добавьте exclude класса в exclude элементы? Когда ты хочешь это.

  • 0
    это похоже на использование атрибута data- *, но даст менее сложный и более производительный селектор, так что это довольно простая и эффективная идея.
  • 0
    Только одна вещь, мне все еще нужно, чтобы она была динамичной, так как я не знаю заранее, какие элементы будут связаны или нет, это следующее взаимодействие с пользователем, так что ваша идея работает, но вместо этого должна быть что-то вроде этого, например: delegatedEvent[0].selector += ":not(.exclude_"+delegatedEvent[0].guid+")";
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню