Несколько .live() привязаны к элементу

Question

У меня есть хороший скрипт всплывающей подсказки. Scrip помещает атрибут title элемента в div tooltip. Подсказка следует за стрелкой мыши через mousemove, удаляет div после mouseout и возвращает название элемента. Он отлично работает на статических страницах, но у меня есть некоторые проблемы с ajax.

http://jsfiddle.net/b5LRK/3/

И я пытаюсь применить .live() для этого сценария. Что-то вроде этого:

$('[title]').live({ 
    mouseover: function(e) { 
    var tip = $(this).attr('title'); 
    $(this).removeAttr('title'); 

    $('body').append('<div id="tooltip">' + tip + '<div class="tipArrow"></div></div>'); 

    $('#tooltip').css('top', e.pageY + 25); 
    $('#tooltip').css('left', e.pageX - 15); 

}, mousemove: function(e) { 

    $('#tooltip').css('top', e.pageY + 25); 
    $('#tooltip').css('left', e.pageX - 15); 

}, mouseout: function() { 

    $(this).attr('title', $('#tooltip').text()); 
    $('body').children('div#tooltip').remove(); 

}}); 

И это не работает! В чем проблема?

Answer 1

Из того, что я видел, проблема с селектором - live() не может работать с селектором, например [title] - он может «прослушивать» селекторов классов или элементов.

Here is fiddle proving it, я только что изменил $('[title]') до $('.mydiv').

Так что просто добавьте класс в содержимое, которое вы загружаете, и оно должно работать нормально, так как вы можете «слушать» этот класс, и .live() может знать, когда добавляются новые элементы с таким классом, а затем присоединяют события.

Если вы не можете контролировать содержание AJAX, вы можете также применить класс на лету на всех элементов, имеющих title, например:

$("#btnAdd").click(function() { 
    $("#Panel").append("<div title='hello world'></div>"); 
    $("#Panel [title]").attr("class", "mydiv"); 
}); 

Updated fiddle.

Answer 2

Вы пропустили } в конце live функции:

$('[title]').live({ 
    mouseover: function(e) { 
    var tip = $(this).attr('title'); 
    $(this).removeAttr('title');  
    $('body').append('<div id="tooltip">' + tip + '<div class="tipArrow"></div></div>'); 

}, mousemove: function(e) { 

    $('#tooltip').css('top', e.pageY + 25); 
    $('#tooltip').css('left', e.pageX - 15); 

}, mouseout: function() { 

    $(this).attr('title', $('#tooltip').text()); 
    $('body').children('div#tooltip').remove(); 

}}/*<=that "}" was missing...*/);  

Answer 3

$('[title]').on("mouseover", function(e) { 

    var tip = $(this).attr('title'); 
    $(this).removeAttr('title'); 

    $('body').append('<div id="tooltip">' + tip + '<div class="tipArrow"></div></div>'); 

    $('#tooltip').css('top', e.pageY + 25); 
    $('#tooltip').css('left', e.pageX - 15); 

}).on("mousemove",function(e) { 

    $('#tooltip').css('top', e.pageY + 25); 
    $('#tooltip').css('left', e.pageX - 15); 

}).on("mouseout",function() { 

    $(this).attr('title', $('#tooltip').text()); 
    $('body').children('div#tooltip').remove(); 
}); 

с версии 1.7 есть новая функция для живой, призвал, может помочь

http://jsfiddle.net/gKsSz/1/