4

オブジェクト指向のJavaScriptコードの記述とjQueryプラグインの開発に関する多くの記事がありますが、これまでのところ、それらがどのように機能するかを理解しており、独自のプラグインを作成できます。

ただし、すべての記事に1つの問題があります（公式のプラグインオーサリングガイド-http://docs.jquery.com/Plugins/Authoringでも） -これらのすべてのパターンは「ライブ」をサポートしていません。

たとえば、このパターンを見てみましょう-http ://www.virgentech.com/blog/2009/10/building-object-Oriented-jquery-plugin.html

$.fn.myplugin = function(options)
{
   return this.each(function()
   {
       var element = $(this);

       // Return early if this element already has a plugin instance
       if (element.data('myplugin')) return;

       // pass options to plugin constructor
       var myplugin = new MyPlugin(this, options);

       // Store plugin object in this element's data
       element.data('myplugin', myplugin);
   });
};

jQueryの一致するオブジェクトごとに新しい「MyPlugin」インスタンスが作成されます。

将来追加される要素で機能するように（可能であれば）変更するにはどうすればよいですか？

ありがとう

4

2 に答える 2

2

私はプラグインでライブを成功裏に使用しており、カスタムオプションとして頻繁に使用しています。クリックされた要素にアラートを追加する簡単な例を次に示します。

$.fn.clickAlert = function(settings) {
    settings = $.extend({live: false}, settings);

    function clickAlertFn() {
        alert('Clicked!');
    }

    if (settings.live) {
        return this.live('click', clickAlertFn);
    } else {
        return this.click(clickAlertFn);
    }
};

// this will only work on existing `a` elements with class foo
$('a.foo').clickAlert();

// this will work on existing and future `a` elements with class bar
$('a.bar').clickAlert({live: true});

この例では、$（'...'）。live（'click'、...'）で正常に機能するものはすべて、$（'...'）。clickAlert（{live：true}）;で機能します。

もう1つ、ほとんどのプラグインの設計では、次のようなことを行う必要があります。

$.fn.foo = function() {
    return $(this).each(function() {
        // code in here...
    });
}

残念ながら、eachループ内でライブを使用することはできません。

于 2011-02-03T17:10:46.557 に答える
1

私はこれがうまくいくと思います（jQuery 1.5.2）：

(function($) {
$.fn.clickTest = function () {
    return this.each(function() {
        $('.clicker').die('click').live('click', function() {
            console.log('clicked');
        });
        $(this).click(function() {
            $('body').append('<a href="#" class="clicker">click here '+$(this).attr('id')+'</a><br> ');

        });
    });
}; }) (jQuery);
于 2011-04-15T20:09:20.827 に答える