Question

我有一个很好的工具提示脚本。 Scrip将元素的title属性放入tooltip div中。工具提示通过鼠标移动鼠标箭头，鼠标移除后删除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();

}});

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

Answer 1

您错过}功能结束时的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 2

从我看到的情况来看，问题在于选择器 - live()无法使用像 [title] 这样的选择器 - 它可以“监听”类或元素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

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版本有live的新功能，可以帮助

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

多个.live（）绑定到元素

3 个答案: