使用「活」的jQuery插件模式

我有很多關於編寫面向對象的javascript代碼和開發jQuery插件的文章，迄今爲止都很好，我理解它們是如何工作的，並且我可以創建自己的插件。使用「活」的jQuery插件模式

但是，所有文章都有一個問題（即使有官方插件創作指南 - 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」實例。

如何更改它（如果它是可能的），以便它可以處理將來添加的元素？

感謝

來源

2010-12-23 andrew

如何這些元素的加入？ – yoda 2010-12-23 14:07:50

他們可能會使用ajax添加，我知道它可以使用回調重新應用插件，但這似乎是一個浪費，因爲新對象將被創建。 – andrew 2010-12-23 14:19:05

我一直在使用現場成功在我的插件往往作爲自定義選項。下面是增加了警報元素一個簡單的例子被點擊的是：

$.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});

在這個例子中任何會與$正常工作（「...‘）生活（’點擊」，......'）將使用$（'...'）。clickAlert（{live：true}）;

一個額外的事情，大多數的插件設計讓你做這樣的事情：

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

不幸的是，用活的each循環內將無法正常工作。

來源

2011-02-03 17:10:46 MrColes

我覺得這個作品（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-15 20:09:20 rphunt2002

使用「活」的jQuery插件模式

回答

相關問題