多个.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（）绑定到元素

回答

相关问题