Вместо 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). Целевой элемент должен быть вторым параметром, а не последним. Не знаете, почему ваш ответ принят, поскольку он не работает. Надеюсь, это поможет.