Question

我是一个jQuery初学者，我想创建一个colorpicker插件我已经完成的工作正常，但是有一个问题。

对于我网页中的所有静态内容，插件可以正常使用

$(document).ready(function() {
    $('.col').colorPicker();
});

但是如果有新的via jQuery生成“.col”目标，我还要再次运行“$（'。col'）。colorPicker（）”来绑定这些项目上的ColorPicker对象。

是否有可能使用插件本身动作并且不运行“$ .colorPicker（）”命令？

前一段时间我记得我用“这['live']（'click'，fn）这样做了”但这已不再适用了..

编辑：

我现在没有插件的代码，但我可以给你一个插件基本结构的另一个例子..

(function ($) {

    function valueReplacer(element) {
        this.element = element;
    } 

    valueReplacer.prototype = {
        // set a new value
        setValue : function() {
            this.element.val('new value');
        }
    }

    // call method of colorPicker instance
    function setValue() {
        $.data(this, "colorPicker").setValue();
    }

    $.fn.valueReplacer = function() {

        return this.each(function() {
            // prevent multiple instances
            if(!$.data(this, "valueReplacer")) {
                $.data(this, "valueReplacer", new valueReplacer($(this)));
            }   
        }); 

    }
})(jQuery);

..这个示例插件现在应该做的一切，就是设置输入的值（$(input).valueReplacer()）点击它时的“新值”..

但是我应该在哪里以及如何设置.on，以便在单击使用valueReplacer对象实例化的元素时调用setValue()方法？

Answer 1

从版本1.7开始，不推荐使用.live（）。您使用的是什么jQuery版本？

如果要在将动态添加的元素上附加侦听器，请尝试使用jQuery .on()方法。

Answer 2

在现代浏览器中，您可以使用MutationObserver对象观察DOM更改，并检测您感兴趣的新元素是否已添加到{{1 }}

另一种选择是直接在DOM上而不是每个单独的document元素收听事件。您可以将.col作为第二个参数传递给jQuery selector函数，该函数将自动过滤事件以确保仅在单击on元素时调用您的处理程序。通过这样做，您将处理插件初始化后添加的.col元素的点击，而无需重新初始化。

.col

对于您添加的插件，我了解了如何使用上述方法进行结构化。看看那个小提琴 - ＆gt; http://jsfiddle.net/Xy6WB/3/

$(document).on('click', '.col', function () {
    //console.log('.col clicked!');
});

Answer 3

正如marko提到的live（）现在可以写成$（document）.on（'action'，'selector'，callback）

这意味着如果单击文档，并且单击的位置与选择器匹配，则会触发回调。检查（）文档上的jQuery以获取更多信息。

jQuery - 自己的插件/函数绑定新的（生成的）对象

3 个答案: