Javascript 绑定到元素的多个.live（）

我有一个很好的工具提示脚本。Scrip将元素的标题属性放入工具提示div中。工具提示通过mousemove跟随鼠标箭头，在mouseout后删除div并将元素标题放回。它在静态页面上工作得非常好，但是我在使用ajax时遇到了一些问题

我正在尝试将.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();

}});

$（“[标题]”）.live({
鼠标悬停：功能（e）{
var tip=$（this.attr（'title'）；
$（this.removeAttr（'title'）；
$（'body'）。追加（''+tip+''）；
$（'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#工具提示'）.remove（）；
}});

---

它不起作用了！有什么问题吗？

您错过了

}

在

直播功能的末尾：

$('[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...*/);    

$（“[标题]”）.live({
鼠标悬停：功能（e）{
var tip=$（this.attr（'title'）；
$（this.removeAttr（'title'）；
$（'body'）。追加（''+tip+''）；
}，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#工具提示'）.remove（）；
}}/* 您错过了
}
活动
功能末尾的
}
：

$('[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...*/);    

$（“[标题]”）.live({
鼠标悬停：功能（e）{
var tip=$（this.attr（'title'）；
$（this.removeAttr（'title'）；
$（'body'）。追加（''+tip+''）；
}，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#工具提示'）.remove（）；
}}/*
$（“[title]”）。在（“鼠标悬停”上，函数（e）{
var tip=$（this.attr（'title'）；
$（this.removeAttr（'title'）；
$（'body'）。追加（''+tip+''）；
$（'tooltip'）.css（'top'，e.pageY+25）；
$（'tooltip'）.css（'left'，e.pageX-15）；
}).on（“mousemove”，函数（e）{
$（'tooltip'）.css（'top'，e.pageY+25）；
$（'tooltip'）.css（'left'，e.pageX-15）；
}).on（“mouseout”，函数（）{
$（this.attr（'title'，$（'#tooltip'）.text（））；
$（'body'）.children（'div#工具提示'）.remove（）；
});

在版本1.7中，有一个新的live功能，叫做on，可能会有所帮助

$（“[title]”）。在（“鼠标悬停”上，函数（e）{
var tip=$（this.attr（'title'）；
$（this.removeAttr（'title'）；
$（'body'）。追加（''+tip+''）；
$（'tooltip'）.css（'top'，e.pageY+25）；
$（'tooltip'）.css（'left'，e.pageX-15）；
}).on（“mousemove”，函数（e）{
$（'tooltip'）.css（'top'，e.pageY+25）；
$（'tooltip'）.css（'left'，e.pageX-15）；
}).on（“mouseout”，函数（）{
$（this.attr（'title'，$（'#tooltip'）.text（））；
$（'body'）.children（'div#工具提示'）.remove（）；
});

在版本1.7中，有一个新的live功能，叫做on，可能会有所帮助

据我所见，选择器存在问题-
live（）
无法使用类似[title]的选择器-但它可以“侦听”类或元素ID选择器

，我刚刚将
$（'[title]'）
更改为
$（'.mydiv'）

因此，只需向正在加载的内容中添加一个类，它就可以正常工作，因为您可以“侦听”这个类，并且
。live（）
可以知道何时添加了带有此类类的新元素，然后附加事件

如果无法控制AJAX内容，还可以在所有具有
标题的元素上动态应用一个类，例如：

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

$（“#btnAdd”）。单击（函数（）{
$（“#面板”）。追加（“”）；
$（“面板[标题]”）.attr（“类”、“mydiv”）；
});

.
据我所见，问题在于选择器-
live（）
无法使用类似[title]的选择器-但它可以“侦听”类或元素ID选择器

，我刚刚将
$（'[title]'）
更改为
$（'.mydiv'）

因此，只需向正在加载的内容中添加一个类，它就可以正常工作，因为您可以“侦听”这个类，并且
。live（）
可以知道何时添加了带有此类类的新元素，然后附加事件

如果无法控制AJAX内容，还可以在所有具有
标题的元素上动态应用一个类，例如：

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

$（“#btnAdd”）。单击（函数（）{
$（“#面板”）。追加（“”）；
$（“面板[标题]”）.attr（“类”、“mydiv”）；
});

.
@Toon.无法正常工作到底是什么？请提供一个JSFIDLE来使用。工具提示显示。仅此而已。mousemove和mouseout似乎无法工作。是的，因为它是原始脚本，没有.live（）@图恩，令人尴尬的…需要一段时间look@Toon.无法正常工作到底是什么？请提供一个JSFIDLE来使用。工具提示显示。仅此而已。mousemove和mouseout似乎无法正常工作。是的，因为它是没有.live（）的原始脚本@卡通。尴尬…会看一看，可能是因为它的
live
，当你删除
title
属性时，
mouseout
处理程序不再注册？可能是因为它的
live
，当你删除
title
属性时，
mouseout
处理程序不再注册？太慢了。不过，请检查一下。我将标题存储在另一个属性中，并将鼠标输出注册到具有
数据标题
属性的元素。@yoavmatchulsky您的小提琴根本不起作用，至少对我来说在Chrome中是这样。工具提示没有像应该的那样随鼠标“移动”。哦，忘了将
鼠标移动
[数据标题]另外..顺便说一句，如果您不想使用浏览器的标题功能，请不要使用它。将所需的标题存储在
数据标题
属性或something@yoavmatchulsky不错-但是数据不是什么东西吗