问动态附加jQuery插件以获得更好的性能

EN

最近，我需要在页面上附加大量的jQuery颜色选择器插件。有了边框、阴影、渐变等的颜色输入，这很快就成为了许多颜色选择。由于为50+元素重复加载了该工具，因此页面将实例化500+颜色选择器。不用说，浏览器遭受了很大的损失。

因此，首先，我花了一些时间尝试不同的方法，让所有输入共享颜色选择器的单个实例。在我看来，这是做这件事最合理的方式。但是项目的情况不允许我花足够的时间来找到一种方法来做到这一点，所以我不得不想出一个替代技术。

我做了，我想听听你对我想出的技术有什么看法，如果有人看到有什么问题？

这个想法是，不是在页面加载时附加插件的所有实例，而是等待，只附加您需要的实例-只是在您需要它们的时候。

下面是我是如何实现的。

首先，我有一些html，有很多很多的输入，就像这样：

<input class="color">

然后，为了将jQuery颜色选择器插件分配给这些输入，我通常会这样做：

jQuery(function($) {
    $('input.color').myColorPicker();
});

但这将导致许多颜色选择器对象立即被实例化，每个匹配的元素一个，每个对象都准备好在其输入被单击时执行其工作。这通常可以很好地工作，但是如果有很多元素，它可能会使浏览器没有响应。

因此，如果用户实际单击了颜色选择器，那么现在我将如何动态地将颜色选择器附加到输入。

jQuery(function($) {

/* Color pickers*/
$('input.color').live('focus', function(event){

// attach a colorpicker on an as needed basis,
// and only if it is not already attached
if(!$(this).hasClass('haspicker')){
    $(this).myColorPicker().addClass('haspicker');
}

})；

当页面加载时，没有附加颜色选择器。当用户单击具有“color”类的输入字段时，它首先接收焦点，选择器插件被附加，元素获得一个用于防止后续双重绑定的ectra类，然后单击事件激发并触发颜色选择器显示。

它工作得很好，但我不确定这是不是一种好的做法，或者这种方法可能存在我没有想到的潜在问题。

所以我只想听听你的想法？