Hi,
I used jquery dialog to create a modal dialog, then I append a span in the dialog. Then I create an colorpicker(Code will be attached below ) on the span, when I click the span, the colorpicker is shown. But when I choose a item in swatches and click Apply button, I found the there are two focus events are triggered, the first is for the span, the second is for the Apply button. which confused me. Why the span is focused firsly?
colorSpan .colorpicker({ color: value, format: 'hex', template: '<div class="colorpicker">' + '<div class="colorpicker-saturation"><i class="colorpicker-guide"></i></div>' + '<div class="colorpicker-hue"><i class="colorpicker-guide"></i></div>' + '<div class="colorpicker-alpha">' + ' <div class="colorpicker-alpha-color"></div>' + ' <i class="colorpicker-guide"></i>' + '</div>' + ' <div class="input-group">' + ' <div style="height: 30px; font-size:8pt; padding-top: 50px;margin-left: 50px">' + ' <button id="colorpicker-cancelBtn" class="btn-primary btn-danger" style="float left; font-size:8pt">Cancel</button>' + ' <button id="colorpicker-applyBtn" class="btn-primary btn-success" style="float left;font-size:8pt">Apply</button>' + ' </div>' + ' </div>' + '</div>', popover: { title: 'Color Picker', }, extensions: [ { name: 'swatches', // extension name to load options: { // extension options colors: { black: '#000000', white: '#ffffff', gray: '#888888', deepRed: '#880015', red: '#ed1c24', orange: '#ff7f27', yellow: '#fff200', green: '#22b14c', blue: '#3f48cc', purple: '#a349a4', success: '#5cb85c', info: '#5bc0de', warning: '#f0ad4e', danger: '#d9534f', }, namesAsValues: false, }, }, ], })
Hi, I used jquery dialog to create a modal dialog, then I append a span in the dialog. Then I create an colorpicker(Code will be attached below ) on the span, when I click the span, the colorpicker is shown. But when I choose a item in swatches and click Apply button, I found the there are two focus events are triggered, the first is for the span, the second is for the Apply button. which confused me. Why the span is focused firsly?
colorSpan .colorpicker({ color: value, format: 'hex', template: '<div class="colorpicker">' + '<div class="colorpicker-saturation"><i class="colorpicker-guide"></i></div>' + '<div class="colorpicker-hue"><i class="colorpicker-guide"></i></div>' + '<div class="colorpicker-alpha">' + ' <div class="colorpicker-alpha-color"></div>' + ' <i class="colorpicker-guide"></i>' + '</div>' + ' <div class="input-group">' + ' <div style="height: 30px; font-size:8pt; padding-top: 50px;margin-left: 50px">' + ' <button id="colorpicker-cancelBtn" class="btn-primary btn-danger" style="float left; font-size:8pt">Cancel</button>' + ' <button id="colorpicker-applyBtn" class="btn-primary btn-success" style="float left;font-size:8pt">Apply</button>' + ' </div>' + ' </div>' + '</div>', popover: { title: 'Color Picker', }, extensions: [ { name: 'swatches', // extension name to load options: { // extension options colors: { black: '#000000', white: '#ffffff', gray: '#888888', deepRed: '#880015', red: '#ed1c24', orange: '#ff7f27', yellow: '#fff200', green: '#22b14c', blue: '#3f48cc', purple: '#a349a4', success: '#5cb85c', info: '#5bc0de', warning: '#f0ad4e', danger: '#d9534f', }, namesAsValues: false, }, }, ], })