Вместо jquery.live() с jquery.on() не работает

У меня есть несколько текстовых полей, которые динамически добавляются после вызова ajax. Эти поля привязаны к обработчикам событий с .live(), которые в настоящее время работают нормально. Я хочу заменить его на новую функцию .on().

Это то, что у меня есть

$('.MyTextBox').live({
  mouseenter: function () { .... },
  mouseleave: function () { .... },
  blur: function () { ... }
});

Когда я заменяю .live() на .on(), он не работает; текстовые поля не отображают их нормальное поведение после их добавления.

Если я пишу $('#MainDiv .MyTextBox').live({..., где MainDiv - это верхний элемент DOM, где все действия происходят, ничего не происходит.

Что мне не хватает?

Спасибо

Ответ 1

Вот пример, который у них есть, но с делегатом:

http://jsfiddle.net/HDtz3/

vs non-delegate: http://jsfiddle.net/HDtz3/1/

Вот почему я ненавижу новый синтаксис.

В вашем просто выполните:

$('#MainDiv').on({
  mouseenter: function () { .... },
  mouseleave: function () { .... },
  blur: function () { ... }
}, '.MyTextBox');

и он должен работать

Ответ 2

tl; dr: для прямой замены подкачки (учет динамической загрузки) см. ниже Общий пример.

Как отмечали другие плакаты, принятый ответ работает, но $(#MainDiv') должен быть "нединамический элемент (не загружающийся снова через ajax)" . Это предпочтительнее по производительности, так как ограничение "расстояния" в пузырьках событий ограничено. В этом примере ему нужно всего лишь создать пузырьковый родительский элемент для обработки.

Решение заключалось бы в привязке к элементу "parent-most", который не будет перезагружен (обычно через AJAX) - в этом примере вам нужно привязать к $('#MainDiv') parent.

Однако

Если вам нужна прямая замена подкачки для `live()`, все, что вам нужно сделать, это привязка к элементу `document`.

Общие примеры

формат 1:

//Replace:
$(selector).live(events, handler);           // Where `events` is a string

//With:
$(document)  .on(events, selector, handler);

формат 2:

//Replace:
$(selector).live(events);                    // Where `events` is 
                                             //   an object of `handler`s
//With:                                      //   (as in OP example)
$(document)  .on(events, selector);

<суб > суб >

Обратите внимание, что с примерами on() контейнер (контейнеры) selector может меняться, и привязка будет автоматически применена; те же функции, что и live().

Пример OP (формат 2)

//Deprecated live() version:
$('.MyTextBox').live({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
});

//New on() version
$(document).on({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
},'.MyTextBox');

Ответ 3

Аарон, Мэтт, я думаю, что у вас есть селектор в неправильном порядке (для преобразования live), посмотрите документацию API для on - http://api.jquery.com/on/#example-7

$("body").on("click", "p", function(){
  //stuff
});

Когда я попробовал свой метод (я пришел сюда, чтобы найти решение для обновления моей основной версии), ошибки консоли появились для всего (1,8, 1,9 и 2,0). Целевой элемент должен быть вторым параметром, а не последним. Не знаете, почему ваш ответ принят, поскольку он не работает. Надеюсь, это поможет.