javascript - JQuery - 使用 .on 插入元素

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