jQuery:如何销毁或重置插件

Question

作为序言，我希望能够获得有关如何完成此类事情的最佳实践的问题的一般答案，以及对我的具体问题的可能答案？

我一直在开发一个“证明你是人类”插件，并且当一切加载时我都会让它工作。我使用 jQuery UI 作为它的 Backbone ，并使用 Draggable 和 Droppable。一般问题是:如何销毁和重置事件中的插件？更具体的问题是:当我将错误的对象拖到该位置时，如何在所有内容都被破坏后重置拖放功能。

下面是伪代码:

(function($){  
    $.fn.robotProof = function(options){
        var defaults = {
            //Default variables
        }

        var options = $.extend(defaults, options);
        return this.each(function(defaults){
        /* Here I style the elements because they were not styled by a CSS
           Then I randomly assign the elements a spot and append them to the container
           Then I use Draggable and Droppable */

        $('.peg').draggable({
            drag: function() {
                /* Drag Function Here */
            },
            revert: 'invalid'
        });
        $('.hole').droppable ({
            accept: '.valid',
            drop: function(){
                var username = $('#username').val();
                var email = $('#email').val();
                var password = $('#password').val();
                if(!username || !email || !password){ //IF ONE OF THE INPUTS IS EMPTY
                    $('.hardError').html("You've forgotten something").slideDown(300);
                    //////* THIS IS WHERE I NEED TO DESTROY/RESET THIS PLUGIN *//////////       
                } else {                        
                    $('.valid').animate({left: "286px",top: "1px"});//success
                }
            }
        });
    };
})(jQuery);  
$(document).ready(function(){
    $('.robotProof').robotProof();
});

您可以在可删除代码中看到错误(最终将出现在所有错误上)我需要能够重置插件。

我觉得(并且已经考虑过这个想法)几乎整个代码都需要是一个函数，这样我就可以再次调用该函数。当我尝试这样做时，我必须嵌套代码，因为它不允许元素再次可拖动，除非我将这些元素也放入函数中，然后函数将调用它自己的函数，我们都知道它不会不要那样工作。

我之前写过几个成功的插件，但这是我在每个插件中都遇到过的问题。我如何销毁所有实例，然后重置插件而不刷新页面。

Answer 1

玩得开心。 :) 看起来我有很多时间，但这正是你想要的。所以线索是用 覆盖你的 jQuery 函数

$.fn.robotProof={}

您会看到它也可以重新启动并重新开始，并具有完整的不同功能内容

<script type="text/javascript">
var i=0;
(function($){
    $.fn.SelfDestroy=function(blabla){
        function init(){
            var brutal = 'mega conspirative content of your plugin :)';
            $('#report').text(brutal);
        };
        init();
        return this.each(function(){
           $('#counter').text('ding dong'+i).show().fadeOut(200);
           i++;
           $(this).text(blabla);
        });
    };
    $.fn.Destroy=function(){
        // lets overwrite the jQuery plugin function
        $.fn.SelfDestroy={};
    };
    $.fn.Rebuild=function(){
        // here we load other work in the same namespace as before
        $.fn.SelfDestroy=function(ZoroZonk){
           if (ZoroZonk=='push to test if stil running') 
           $('#report').text('my name is bond, james bond').show().fadeOut(100).fadeIn(100);
        };
    };
})(jQuery);
$(document).ready(function(){
   $('#bomb').on('click',function(){
       $().Destroy();
       $().Rebuild();
   });
   $('#report').SelfDestroy('huaaa! time to run! but stil original function work');
});
</script>

<button id="selfdestroytester" onclick="$(this).SelfDestroy('push to test if stil running')">check if valid running code</button>
<div id="report"> placeholder for output </div>
<button id="bomb" onclick="">push to start selfdestroy!</button>
<div id="counter" style="display:none"> hitcounter </div>