У меня есть <ul>, который заполняется javascript после начальной загрузки страницы. В настоящее время я использую .bind с mouseover и mouseout.
Проект только что обновлен до jQuery 1.7, поэтому у меня есть возможность использовать .on, но я не могу заставить его работать с hover. Можно ли использовать .on с hover?
EDIT. Элементы, которые я привязываю, загружаются с помощью javascript после загрузки документа. Вот почему я использую on, а не только hover.
(Посмотрите последнее изменение в этом ответе, если вам нужно использовать .on() с элементами, заполненными JavaScript)
Используйте это для элементов, которые не заполняются с помощью JavaScript:
$(".selector").on("mouseover", function () {
//stuff to do on mouseover
});
.hover() имеет собственный обработчик: http://api.jquery.com/hover/
Если вы хотите сделать несколько вещей, соедините их в обработчике .on() следующим образом:
$(".selector").on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
});
В соответствии с приведенными ниже ответами вы можете использовать hover с .on(), но:
Несмотря на то, что для нового кода настоятельно не рекомендуется, вы можете увидеть псевдо-событие-имя "зависание", используемое в качестве сокращения для строки "mouseewave mouseenter". Он прикрепляет один обработчик событий для тех два события, и обработчик должен проверить event.type, чтобы определить будет ли событие mouseenter или mouseleave. Не путайте "hover" псевдо-событие-имя с методом .hover(), который принимает один или две функции.
Кроме того, для его использования нет преимуществ в производительности, и он более громоздкий, чем просто использование mouseenter или mouseleave. Ответ, который я дал, требует меньше кода и является правильным способом достижения чего-то подобного.
ИЗМЕНИТЬ
Прошло некоторое время, так как на этот вопрос был дан ответ, и, похоже, он получил некоторую тягу. Вышеприведенный код по-прежнему стоит, но я хотел бы добавить что-то в свой первоначальный ответ.
В то время как я предпочитаю использовать mouseenter и mouseleave (помогает мне понять, что происходит в коде) с .on(), это то же самое, что написать следующее с hover()
$(".selector").hover(function () {
//stuff to do on mouse enter
},
function () {
//stuff to do on mouse leave
});
Поскольку исходный вопрос задал вопрос о том, как они могли бы правильно использовать on() с hover(), я думал, что исправлю использование on() и не счел нужным добавлять код hover() в то время.
РЕДАКТИРОВАТЬ 11 ДЕКАБРЯ 2012
Ниже приведены некоторые новые ответы, поясняющие, как .on() должен работать, если рассматриваемый div заполняется с использованием JavaScript. Например, скажем, вы заполняете div с помощью события jQuery .load(), например:
(function ($) {
//append div to document body
$('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));
Вышеприведенный код для .on() не выдерживает. Вместо этого вы должны немного изменить свой код, например:
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector"); //pass the element as an argument to .on
Этот код будет работать для элемента, заполненного JavaScript после события .load(). Просто измените свой аргумент на соответствующий селектор.
Ни одно из этих решений не работало для меня, когда мышь над/из объектов, созданных после загрузки документа в качестве запросов. Я знаю, что этот вопрос старый, но у меня есть решение для тех, кто все еще ищет:
$("#container").on('mouseenter', '.selector', function() {
//do something
});
$("#container").on('mouseleave', '.selector', function() {
//do something
});
Это привяжет функции к селектору, чтобы объекты с этим селектором, сделанные после того, как документ был готов, все равно смогут его вызвать.
Я не уверен, как выглядит ваш Javascript, поэтому я не смогу сказать, есть ли какие-либо помехи. Но .hover() прекрасно работает как событие с .on().
$("#foo").on("hover", function() {
// disco
});
Если вы хотите использовать свои события, используйте возвращаемый объект из события:
$("#foo").on("hover", function(e) {
if(e.type == "mouseenter") {
console.log("over");
}
else if (e.type == "mouseleave") {
console.log("out");
}
});
$("#MyTableData").on({
mouseenter: function(){
//stuff to do on mouse enter
$(this).css({'color':'red'});
},
mouseleave: function () {
//stuff to do on mouse leave
$(this).css({'color':'blue'});
}},'tr');
Вы можете использовать .on() с помощью hover, выполнив раздел "Дополнительные примечания":
Несмотря на то, что для нового кода настоятельно не рекомендуется, вы можете увидеть псевдо-событие-имя "зависание", используемое в качестве сокращения для строки "mouseewave mouseenter". Он прикрепляет один обработчик событий для тех два события, и обработчик должен проверить event.type, чтобы определить будет ли событие mouseenter или mouseleave. Не путайте "hover" псевдо-событие-имя с методом .hover(), который принимает один или две функции.
Это должно было бы сделать следующее:
$("#foo").on("hover", function(e) {
if (e.type === "mouseenter") { console.log("enter"); }
else if (e.type === "mouseleave") { console.log("leave"); }
});
EDIT (примечание для пользователей jQuery 1.8+):
Устаревший в jQuery 1.8, удаленный в 1.9: имя "hover" , используемое как сокращение для строки "mouseewave mouseleave". Он присоединяет единственную обработчик событий для этих двух событий, и обработчик должен проверить event.type, чтобы определить, является ли событие mouseenter или mouseleave. Не путайте псевдо-событие-имя "hover" с методом .hover() который принимает одну или две функции.
Просто серфинг из Интернета и почувствовал, что я могу внести свой вклад. Я заметил, что с приведенным выше кодом, опубликованным @calethebrewer, может возникнуть несколько вызовов по селектору и неожиданное поведение, например: -
$(document).on('mouseover', '.selector', function() {
//do something
});
$(document).on('mouseout', '.selector', function() {
//do something
});
Эта скрипка http://jsfiddle.net/TWskH/12/ меня раздражает. При анимации таких элементов, как в плагинах, я обнаружил, что эти множественные триггеры приводят к непреднамеренному поведению, которое может привести к тому, что анимация или код будут вызваны больше, чем это необходимо.
Мое предложение состоит в том, чтобы просто заменить mouseenter/mouseleave: -
$(document).on('mouseenter', '.selector', function() {
//do something
});
$(document).on('mouseleave', '.selector', function() {
//do something
});
Несмотря на то, что это предотвратило вызов нескольких экземпляров моей анимации, я, в конце концов, пошел с mouseover/mouseleave, поскольку мне нужно было определить, когда дети родителя зависли.
Вы можете указать один или несколько типов событий, разделенных пробелом.
So hover равно mouseenter mouseleave.
Это мое sugession:
$("#foo").on("mouseenter mouseleave", function() {
// do some stuff
});
Для элементов, которые добавляются динамически, см. http://api.jquery.com/on/. Я цитирую основные части: Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в момент, когда ваш код выполняет вызов .on(). Если на страницу вводится новый HTML-код, желательно использовать делегированные события для присоединения обработчика событий, как описано далее.
Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже. Выбирая элемент, который, как гарантируется, присутствует в момент присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий.
В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, другим преимуществом делегированных событий является их потенциал для гораздо более низких накладных расходов, когда необходимо контролировать многие элементы. В таблице данных с 1000 строк в теле, этот пример прикрепляет обработчик к 1000 элементам:
$("#dataTable tbody tr").on("mouseenter", function(event){
alert($(this).text());
});
Подход с делегированными событиями присоединяет обработчик событий только к одному элементу, тём, а событие должно только пузыриться на одном уровне (от tr до tbody):
$("#dataTable tbody").on("mouseenter", "tr", function(event){
alert($(this).text());
});
Примечание. Делегированные события не работают для SVG.
Функция jQuery hover предоставляет функции мыши и мыши.
$(".item-image").hover(function () {
// mouseover event codes...
}, function () {
// mouseout event codes...
});
Если вам нужно, чтобы оно было как условие в другом событии, я решил его следующим образом:
$('.classname').hover(
function(){$(this).data('hover',true);},
function(){$(this).data('hover',false);}
);
Затем в другом случае вы можете легко использовать его:
if ($(this).data('hover')){
//...
}
(я вижу, что некоторые используют is(':hover') для решения этой проблемы. Но это еще не действительный селектор jQuery и не работает во всех совместимых браузерах)
Плагин jQuery hoverIntent http://cherne.net/brian/resources/jquery.hoverIntent.html идет намного дальше, чем наивные подходы, перечисленные здесь. Хотя они, безусловно, работают, они могут не обязательно вести себя так, как ожидают пользователи.
Самой сильной причиной использования hoverIntent является функция тайм-аута. Это позволяет вам делать что-то вроде предотвращения закрытия меню, потому что пользователь перетаскивает свою мышь немного слишком далеко вправо или влево, прежде чем щелкнуть элемент, который они хотят. Он также предоставляет возможности для того, чтобы не активировать события зависания в заграждении и ждать сфокусированного зависания.
Пример использования:
var config = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
over: makeTall, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )
Дальнейшее объяснение этого можно найти на fooobar.com/info/25970/...