0

タイトルが明確であることを願っています。

だから私はdivをソート可能なウィジェットに変換する複雑な大きなプラグインを持っていますが、誰かがDOMに新しいdivを広告すると、新しく追加されたdivをウィジェットに変換するためにプラグインを再度実行する必要がありますが、これは既に変換されたすべての div に対して実行されることを意味します。では、どうすればこれを防ぐことができますか。ラップされた要素はチェックできるので、これは大したことではありませんが、エフェクトなどは数回実行されます (DOM に追加された div の数によって異なります)。

私はプラグインをどのように使用しているかを簡単に考えました.(ここに完全なプラグインを投稿できません)

この問題はアニメーションなど(クリックイベントなど)であるため、追加されたクラスのチェックを含むソリューションを探していません

// div (ウィジェット)

<div class="widget">
    <div></div>
</div>

<div class="widget">
    <div></div>
</div>

...
...
...

// プラグイン (基本的な考え方)

;(function($, window, document, undefined){

    $.fn.plugin = function(options) { 

        options = $.extend({}, $.fn.plugin.options, options); 

            return this.each(function() {  

                var obj = $(this);

                // for this example we wrap the div
                obj.find(options.widgets).wrap('<div class="wrapped-widget"></div>');

                // add a link to the widget
                options.widgets.prepend('<a href="#" class="link">link</a>')

                // run the animation just once
                options.widgets.on('click', '.link', function(){
                    $(this).next().animate({height: 'toggle'});
                });


            });     
        };


        $.fn.plugin.options = {
            widgets: '.widget',
            // etc          
        };

})(jQuery, window, document);

// プラグイン呼び出し

$('body').plugin({widgets: '.widget'});

// 新しい div を DOM に追加

$('#add').click(function(){
    $('body').append('<div class="widget"><a href="#" class="link">link</a><div></div></div>');
    $('body').plugin({widgets: '.widget'});
});
4

0 に答える 0