Нужна помощь в понимании функции jquery Delegate ()

Question

Мне трудно понять синтаксис функции .delegate в jquery.Допустим, у меня есть следующее:

$(".some_element_class").delegate("a", "click", function(){

    alert($(this).html());

});

Я знаю, что элемент a - это элемент, к которому применяется событие click.Я знаю, что как только мы щелкнем по этому элементу a, будет вызвано событие click и будет вызвана функция обратного вызова.Но какова цель того, что предшествует .delegate?В этом случае, какова цель .some_element_class?Как мне прочитать выше, включая .some_element_class?Кроме того, что в приведенном выше примере означает $(this)?Представляет ли он элемент a или .some_element_class?

Пожалуйста, кто-нибудь, пролите свет на это.

Спасибо

Answer 1

Это уменьшает привязку события.

Это в основном устанавливает событие на a tags ТОЛЬКО в элементах с классом .some_element_class без фактической привязки события непосредственно к a tags.

http://api.jquery.com/delegate/

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

Начиная с jQuery 1.7, .delegate () был заменен методом .on ().Однако для более ранних версий это остается наиболее эффективным средством использования делегирования событий.Дополнительная информация о привязке и делегировании событий содержится в методе .on ().В целом, это эквивалентные шаблоны для двух методов:

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+

$(".some_element_class").on("a", "click", function(){

    alert($(this).html());

});

Answer 2

"... какова цель того, что стоит перед .delegate?"

• Делегат связан с .some_element_class элемент.

• Этот делегат активируется для каждого клика, который происходит внутри .some_element_class

• Этот делегат проверяет то, что было нажатотак что ваша функция обработчика будет только работать, если ...

  • фактический нажатый элемент соответствует селектору "a" или
  • любой предок фактического нажатого элемента, являющийся потомком .some_element_class, соответствует селектору "a".

---

<div class="some_element_class">  <!-- delegate handler is here -->

    <div>won't trigger your handler</div>
    <a>will trigger your handler</a>
    <a><span>will trigger</span> your handler</a>

</div>

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

---

Поскольку имеется только один включающий обработчик, он будет работатьдля будущих элементов, добавляемых в контейнер ...

<div class="some_element_class">  <!-- delegate handler is here -->

    <div>won't trigger your handler</div>
    <a>will trigger your handler</a>
    <a><span>will trigger</span> your handler</a>

      <!-- this element newly added... -->
    <a><span>...will also trigger</span> your handler</a>

</div>

---

" Кроме того, что в приведенном выше примере, что представляет $(this)?"

this будет представлять элемент, который соответствует селектору "a".

Answer 3

это означает, что delegate() вызывается на .some_event_class.a - строка селектора, click - строка типа события & function() - функция обработчика события.delegate() метод используется для обработки "живого события", а для статических событий bind().Надеюсь, это поможет.Не стесняйтесь спрашивать, если у вас есть какие-либо сомненияотдельные элементы документа.

Answer 4

a на самом деле является просто фильтрующим селектором, что произойдет, если обычное событие щелчка будет привязано к .some_element_class, и каждый раз, когда событие срабатывает, цель события перемещается до .some_element_class, чтобы увидеть, есть лиявляется элементом, который соответствует селектору фильтрации (тэг a).Если это произойдет, ваш обратный вызов будет запущен с this, установленным на первый элемент, который соответствует селектору a в пузырящемся пути.

Вы можете сделать нечто подобное с bind:

$(".some_element_class").bind("click", function (e) {
    var matches = $(e.target).closest("a", this);
    if (matches.length) {
        yourcallback.call(matches[0], e);
    }
});