javascript - jQueryコードは2回目のクリック後にのみ機能します

Question

次の構成を実行する jQuery プラグインを使用しています。

$('#colorSelector').ColorPicker({

});

ただし、これを jQuery で動的に追加された div に追加する必要があるため、次を使用しています。

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

    $(this).ColorPicker({

    });

});

上記の方法では、数回クリックした後にのみ機能します。最初のクリックでは機能しません。最初のクリックで機能させるにはどうすればよいですか。

デモ: http://jsfiddle.net/G8yBX/

Answer 1

div を動的に追加したら、ColorPickerすぐにそれを呼び出します。それ以外の場合は、コードをアクティブにするために 1 回クリックする必要があります (デモで確認できるように)。

Answer 2

Only call it once; no need to be nested in a document event.

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

---

You can bind it in the event that adds the element, if that's your goal.

Answer 3

最初に初期化してから呼び出す必要があるようですshow()：

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