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