0

jquery プラグイン ボイラープレート (こちらから入手可能) を使用して、div 要素の拡張を作成しています。プラグインは、元の div 内に他の div または要素を追加するためのものです。私の問題は、div 内の要素を破棄して再作成できるようにしたいということです。

プラグイン コードの簡単な例を次に示します。

(function($) {

$.extension = function(element, options) {

    var defaults = {
        foo: 'bar',
        onFoo: function() {}
    }

    var plugin = this;

    plugin.settings = {}

    var $element = $(element),
         element = element;

    plugin.init = function() {
        plugin.settings = $.extend({}, defaults, options);
        // code goes here

        var newDiv = $(document.createElement("div"));
        newDiv.html("hello world");

        $element.append(newDiv);
    }

    plugin.foo_public_method = function() {
        // code goes here
    }

    var foo_private_method = function() {
        // code goes here
    }

            plugin.destroy = function () {
        $element.empty();
    }

    plugin.init();

}

$.fn.extension = function(options) {

    return this.each(function() {
        if (undefined == $(this).data('extension')) {
            var plugin = new $.extension(this, options);
            $(this).data('extension', plugin);
        }
    });

}

})(jQuery);

ご覧のとおり、jquery empty() メソッドを使用して div の子を消去しています。それはうまく消去されますが、その後、それらを再作成することはできません。

プラグインの呼び出しに使用される HTML コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="js/jquery1.7.2.min.js"> </script>
<script type="text/javascript" src="js/extension.js"> </script>
</head>

<body>
<button type="button" id="destroy">Destroy</button>
<button type="button" id="create">Create</button>
<div id="random" ></div>

<script>
$('#random').extension();
$('#destroy').click(function(){
$('#random').data('extension').destroy();
});

$('#create').click(function(){
alert("hey");
$('#random').extension();
 });

 </script>

 </body>
 </html>

私は何を間違っていますか？

4

1 に答える 1

1

古いデータを削除していないため、プラグインは再作成されません。== undefined

試す

plugin.destroy = function () {
    $element.empty().removeData("extension");
};
于 2012-06-25T17:09:48.857 に答える