jQuery代码仅在第二次单击后才能工作

Question

我正在使用具有以下配置的jQuery插件来运行：

$('#colorSelector').ColorPicker({

});

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

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

    $(this).ColorPicker({

    });

});

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

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

Answer 1

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

Answer 2

如果要为此使用委托，则必须确保不要通过使用其他类在每次点击时重新初始化它，然后最后要重新触发click事件并防止这一完成。

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

我将改用生成颜色选择器的成功回调。

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/