0

プラグインを作成しようとしていますが、複数のインスタンスで問題が発生しています。コードが使用されているインスタンスでのみ動作するようにしたいのですが、現在、1 つをクリックすると両方で動作します。対話しているインスタンスでのみ動作するプラグインを作成するにはどうすればよいですか? 以下は、私が話していることの簡略化されたサンプルです。

(function( $ ) {
    $.fn.cals = function(options) {
    var containing_element = this;


        var opts = $.extend( {}, options);

        // create a container after each element
        $(containing_element).after('<div class="container">Click</div>');

        return this.each(function() { 
             $('.container').on('click', function() { 
                  console.log('test')
             })
        }); // END this.each
    };
})( jQuery );

html コードは次のとおりです。

<script>
    $(document).ready(function() {
        $('.test').cals();
    });
</script>

    <div class="test" type="text">
    <div class="test" type="text">

</html>

<div class="container>Click</div>コードは両方の div の下に挿入されます.test。1つをクリックすると、console.log('test')2つの「テスト」が吐き出されます。対話しているインスタンスに対してのみコードを動作させたい。

4

1 に答える 1

1

プラグインの構文を修正して、新しい要素 (この場合は以前に定義した要素のクローン) をeach()ループに追加することをお勧めします。

(function ($) {
    $.fn.cals = function (options) {
        var containing_element = this;
        var opts = $.extend({}, options);

        // create containing element for calendar
        var container = $('<div />', {
            'class' : 'container',
            'text' : 'click',
            'click' : function(){
                console.log('test');
            }
        });

        return this.each(function () {
            $(this).after(container.clone(true, true));
        }); // END this.each
    };
})(jQuery);

JS フィドルのデモ。

ちなみに、containing_elementはすでにjQuery オブジェクトです (内ではありませんthisが、関数のスコープ内にあります) 。jQuery で再ラップする必要はありませんでしたが、そうしても害はありませんが、不必要に高価です。 .each()

于 2013-07-07T23:34:21.247 に答える