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

何らかの理由でこれは機能しません。グーグルとスタックオーバーフローを見回しても答えはありませんでした。私は何を間違っていますか？

編集: 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();
}

.tooltip()Bootstrapを同じものにチェーンしていたので、これは私にとって本当に奇妙$('<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 要素このイベントを受け取ることができます。」

省略形の bind メソッドを使用していない場合、「エミュレートされた」イベントを取得していない可能性があり、代わりに jQuery が IE 以外では存在しない実際のイベントを探している可能性があることを意味します。

明確にするために、jsFiddle のコードで動作するようにもしました。http://jsfiddle.net/zFKXx/2/

于 2012-12-03T15:24:02.470 に答える