Question

我正在创建一个供个人使用的小型jQuery插件，当您将鼠标悬停在元素上时会为文档添加一些内容。

目前这是（简化）代码：

    (function($){
    $.fn.tempFnName = function(options){

        var element = $('<div />');

        return this
        .each(function(){
            $(this)
            .on('mouseenter',
                function(){
                    $('body')
                    .append(element);
                })
            .on('mouseleave',
                function(){
                    element.remove();
                });
        });
    };
})(jQuery);

出于某种原因，这不起作用。环顾四周google和stackoverflow没有提供答案。我做错了什么？

编辑正如WTK所指出的，这段代码没有任何问题。以下代码显示了如何实现插件。

function appendAddAnchor(){
    return $('<a />').tempFnName();
}

//even if I try the following, the click event will not work!
function appendAddAnchor(){
    return $('<a />')
            .click(function(){console.log('test')});
            .tempFnName();
}

这对我来说真的很奇怪，因为我曾经把Bootstrap'.tooltip()链接到同一个$('<a />')，这没有任何问题......

Answer 1

我在这个小提琴中试过这个：http://jsfiddle.net/Gm4jk/2/

(function ($) {
    $.fn.tempFnName = function(options){
        var element = $('<div/>');
        element.html('aTest');
        return this.each( function(){
            $(this).mouseenter(function(){
                $('body').append(element);
            });
            $(this).mouseleave(function(){
                element.remove();
            });
        });
    };
})(jQuery);

$('#start').tempFnName();

它工作得很好。可能是您遇到了兼容性问题。

来自jQuery文档：

“mouseenter JavaScript事件是Internet Explorer专有的。由于事件的一般实用程序，jQuery模拟此事件，因此无论浏览器如何都可以使用它。当鼠标指针进入元素时，此事件将发送到元素。任何HTML元素都可以接收此事件。“

我读到这意味着如果你没有使用速记绑定方法，你可能没有得到'模拟'事件而是jQuery可能正在寻找除了IE之外的所有事件都不存在的实际事件。

要清楚，我还可以使用jsFiddle中的代码。 http://jsfiddle.net/zFKXx/2/

jQuery插件：将eventlistener添加到元素

1 个答案: