0

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

$('#colorSelector').ColorPicker({

});

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

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

    $(this).ColorPicker({

    });

});

使用上述方法，它只能在单击几次后才有效。它在第一次单击时不起作用。我怎样才能让它在第一次点击时工作。

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

4

4 回答 4

2

动态添加 divColorPicker后，立即调用它，否则您需要单击一次以激活代码（如您在演示中所见）。

于 2013-10-28T21:02:17.427 回答
1

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

$('#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);
    }
});

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

于 2013-10-28T21:38:52.663 回答
1

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

$(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/

相反，我会使用任何生成颜色选择器的成功回调。

于 2013-10-28T21:20:44.187 回答
-1

好像你必须先初始化它，然后调用show()：

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

于 2013-10-28T21:04:22.673 回答