多個.live（）綁定到元素

我有一個很好的工具提示腳本。 Scrip將元素的標題屬性放入工具提示div中。 Tooltip通過mousemove跟隨鼠標箭頭，在mouseout之後移除div並將元素標題放回。它在靜態頁面上完美工作，但是我對Ajax有一些麻煩。多個.live（）綁定到元素

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(); 

}});

而且它不工作！有什麼問題？

來源

2012-02-05 Toon

也許是因爲它的'live'，當你刪除'title'屬性時，'mouseout'處理程序不再被註冊？ – yoavmatchulsky 2012-02-05 14:14:36

從我所看到的，問題在於選擇器 - live()無法與選擇器一起使用，如[標題] - 它可以「聽」類或元素ID選擇器。

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。

來源

2012-02-05 14:02:30

榮譽。我太慢了。不過請查看[my fiddle]（http://jsfiddle.net/b5LRK/10/）。我將標題存儲在另一個屬性中，並將鼠標註冊到具有「data-title」屬性的元素。 – yoavmatchulsky 2012-02-05 14:22:23

@yoavmatchulsky你的小提琴根本無法工作，至少對我來說，在Chrome中。工具提示並不像應該那樣隨鼠標「移動」。 – 2012-02-05 14:27:23

哦，忘了將'mousemove'移動到[data-title]。 http://jsfiddle.net/b5LRK/11/。順便說一句，如果你不想使用瀏覽器的標題功能，請不要使用它。將你想要的標題存儲在'data-title'屬性中 – yoavmatchulsky 2012-02-05 14:30:25

您在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...*/);

來源

2012-02-05 13:20:03 gdoron

是的，我的不好。但。它仍然無法正常工作。 – Toon 2012-02-05 13:23:16

@ Toon。 _不正常工作_究竟是什麼？請給一個** JSFiddle **來處理。 – gdoron 2012-02-05 13:26:32

工具提示顯示。就這樣。似乎mousemove和mouseout不起作用。 – Toon 2012-02-05 13:32:52

$('[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/

來源

2012-02-05 13:50:56

這是行不通的，但它不是委託... – gdoron 2012-02-05 13:54:31

多個.live（）綁定到元素

回答

相關問題