JQuery.one не работает с элементом, загруженным ajax

Question

Я пытаюсь использовать jQuery.one для элемента, загруженного ajax. Он работает, если элемент уже загружен, но не когда элемент загружается с помощью ajax.

Вот что я пытаюсь сделать.

$("#selector").one('mouseenter', selMouseEnter); 

function selMouseEnter() { 
Some code.... 
} 

Thx заранее. Шаши

EDIT:

$(".pitem").on('mouseenter', selMouseEnter); 

$(".pitem").mouseleave(function(){ 
    jQuery(this).find(".tooltip").remove(); 
    $(".pitem").on('mouseenter', selMouseEnter); 
}); 

function selMouseEnter() { 
    jQuery(this).find(".tooltip").remove(); 
     var id = $(this).attr('id').replace('myprize', ''); 
    var myObj = jQuery('#Py').data('myprize' + id); 
    if(myObj) { 
     Some code that is opening tooltip having buttons.... 
    } 
} 

Теперь конфликт, когда я снова и не нажимать на кнопку в подсказке его вызывающему событие MouseEnter один конкретный к кнопке.

Примечание: #PY приходит с использованием Ajax

Answer 1

Поскольку элемент динамически загружен, вам необходимо использовать .live() или .on() или livequery(). См. Ссылки для получения дополнительной информации. Используйте соответствующий метод в зависимости от вашей версии jQuery

Answer 2

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

В JQuery 1.7+, вы можете использовать делегированные версию .one(), как это и было бы ответить на первый MouseEnter на #selector объекта всякий раз, когда он добавляется к странице:

$(document).one('mouseenter', "#selector", selMouseEnter); 

В идеале, вы бы замените document статическим родительским объектом #selector, который существует во время запуска этого кода, поскольку это будет более эффективно, чем использование объекта document, хотя document будет работать.

Answer 3

Чтобы правильно работать с событиями jquery на динамически загружаемых элементах, вам необходимо будет присоединить события таким образом.

$("#parent").on({ 
    mouseenter: function (e) { 
    // perform mouse enter event 
    }, 
    mouseleave: function (e) { 
    // perform mouse leave event 
} 
}, '#selector'); 

Где #Parent представляет собой элемент id, где элементы загружаются динамически.