Question

我有一个为特定对象创建工具提示的函数。目前，我在ajax插入后运行工具提示函数来创建和追加新的工具提示对象。我很好奇是否有办法使用.on（）在插入时自动运行工具提示功能，而不是手动运行它。

例如：

 $('[title]').on('inserted', function(){
     tooltip(this);
 });

我做了一些阅读，看起来自定义触发器可能是要走的路，但我喜欢这样的事情：）

Answer 1

根据请求，这是伪代码。

$(document).ready(function() {
    $('body').on('added','*',function() {
        console.log($(this),'has been added');
    });
    $('body').append('<div>This is the first div</div>');
});

(function($) {
    fncs = {
        append:$.fn.append,
        appendTo:$.fn.appendTo
        // etc.
    }
    // we're assigning the original functions in this
    // object to be executed (applied) later
    $.fn.append = function() {
        fncs.append.apply(this,arguments);
        $(this).children().last().trigger('added');
        return $(this);
    }
    $.fn.appendTo = function() {
        fncs.appendTo.apply(this,arguments);
        return $(this);
        // no need to trigger because this function calls the one
        // above for some reason, and it's taking care of the
        // triggering the right element(s I think)
    }
})(jQuery);

Answer 2

这不是您正在寻找的响应，但我不会直接在元素上附加工具提示。相反，我会使用一个类来处理我希望工具提示在鼠标悬停时显示的类，并按以下方式使用.on()事件处理程序：

$('body').on('mouseover','.tooltip',function() {
    // show tooltip
    console.log($(this).data('tooltip'));
    return false;
}).on('mouseout','.tooltip',function() {
    // hide tooltip
    return false;
});

因此，无论您添加到正文（不一定是直接子项），都会触发此事件处理程序。

我可能只是创建一个额外的函数来将工具提示数据与类一起分配给每个元素。

$.fn.extend({
    tooltip:function(text) {
        text = text || '';
        return $(this).each(function() {
            $(this).data('tooltip',text).addClass('tooltip');
        });
    }
});

$('#someID').tooltip("Click me!");
$('button').tooltip("I'm a button");

JQuery - 使用.on和元素插入

2 个答案: