1

我正在创建一个供个人使用的小型 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 />')，而且这没有任何问题......

4

1 回答 1

3

我在这个小提琴中试过这个：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/

于 2012-12-03T15:24:02.470 回答