0

我是 jQuery 初学者，我想创建一个颜色选择器插件。
我所做的一切工作正常，但有一个问题。

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

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

但是如果也有新的通过 jQuery 生成的“.col”对象，我必须再次运行“$('.col').colorPicker()”，在这些项目上绑定一个 ColorPicker 对象。

是否有可能在不运行“$.colorPicker()”命令的情况下使用插件本身即时执行此操作？

前段时间我记得我用“this ['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, 以便在setValue()单击使用 valueReplacer 对象实例化的元素时调用该方法？

4

3 回答 3

0

正如 marko 提到的 live() 现在可以写成 $(document).on('action', 'selector', callback)

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

于 2013-03-31T21:31:50.630 回答
0

从 1.7 版本开始，不推荐使用 .live()。你使用的是什么 jQuery 版本？

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

于 2013-03-31T21:23:23.350 回答
0

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

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

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

对于您添加的插件，我对如何使用上述方法构建事物有一个想法。检查一下那个小提琴-> http://jsfiddle.net/Xy6WB/3/

(function ($) {
    var initialized = false,
        methods = {
            setValue: function (value) {
                this.innerHTML = value;
            }
        },
        slice = Array.prototype.slice;

    $.fn.valueReplacer = function(method) {
        var args = slice.call(arguments, 1);

        if (!initialized) {
            //when a plugin element is clicked, invoke the function in the
            //context of that element
            $(document).on('click', '.value-replacer-plugin', function (e) {
                methods.setValue.call(this, 'another value');
            });
        }

        //the plugin will automatically handle any element with
        //the value-replacer-plugin class, so here just add the class
        //to the element
        if (this.length) {
            this.each(function() {
                $(this).addClass('value-replacer-plugin');

                if (method) {
                    methods[method].apply(this, args);
                }
            });
        }

        return this;
    }
})(jQuery);
于 2013-03-31T21:26:02.520 回答