Question

我正在使用一个jQuery插件，它具有以下配置来运行：

$('#colorSelector').ColorPicker({

});

但是，我需要将此添加到动态添加jQuery的div中，因此我使用以下内容：

$(document).on('click', '#colorSelector', function(){

    $(this).ColorPicker({

    });

});

使用上述方法，它只能在点击几次后才能工作。它在第一次点击时不起作用。如何在第一次点击时使其工作。

演示： http://jsfiddle.net/G8yBX/

Answer 1

动态添加div后，请立即调用其中的ColorPicker，否则需要单击一次以激活代码（如演示中所示）。

Answer 2

如果你想使用委托，你必须确保你没有通过使用额外的类在每次点击时重新初始化它，然后最后你想要重新触发点击事件，并防止这一事件完成。

$(document).on('click', '#colorSelector:not(.cp)', function(){

    $(this).addClass('cp').ColorPicker({
        color: '#0000ff',
        onShow: function(colpkr) {
            $(colpkr).fadeIn(200);
            return false;
        },
        onHide: function(colpkr) {
            $(colpkr).fadeOut(200);
            return false;
        },
        onChange: function(hsb, hex, rgb) {
            $('#colorSelector div').css('backgroundColor', '#' + hex);
            $('#colorSelector input').val('#' + hex);
        }
    }).click();
    return false; 

});

http://jsfiddle.net/Tentonaxe/G8yBX/12/

我会改为使用生成colorpicker的成功回调。

Answer 3

只调用一次;无需嵌套在文档事件中。

$('#colorSelector').ColorPicker({
    color: '#0000ff',
    onShow: function(colpkr) {
        $(colpkr).fadeIn(200);
        return false;
    },
    onHide: function(colpkr) {
        $(colpkr).fadeOut(200);
        return false;
    },
    onChange: function(hsb, hex, rgb) {
        $('#colorSelector div').css('backgroundColor', '#' + hex);
        $('#colorSelector input').val('#' + hex);
    }
});

如果这是你的目标，你可以在添加元素的事件中绑定它。

Answer 4

似乎您必须先将其初始化，然后调用show()：

http://jsfiddle.net/G8yBX/6/

jQuery代码仅在第二次单击后才起作用

4 个答案: