Твиттер Boostrap Popover.js с расширенным выбором цветовой палитры теряет вложенные события

Question

Я использую бутсрап из твиттера, и это круто. Тем не менее, у меня есть небольшая проблема. Я пытаюсь использовать плагин Popover для генерации на лету палитры цветов, связанных с каждым входом с классом.colorInput

Вот код, который я придумал:

$('.colorInput').each(function()
{
    var src = $(this);

    src.popover({
        html:   true,
        trigger:    'manual',
        content:    function(){
            return $('<div/>').farbtastic(src);
        }
    }).focus(function(e){

        src.data('data-default', src.val());

        $('.colorInput').each(function(){
            $(this).popover('hide');
        });
        src.popover('show');


    }).blur(function(e){
        if(src.data('data-default') != src.val())
        {
            formSubmit();
        }

        src.popover('hide');
    });   
});

Все работает довольно хорошо, за исключением одной ОГРОМНОЙ детали: когда я устанавливаю содержимое поповера с помощью

return $('<div/>').farbtastic(src);

возвращаемые данные чередуются с любым из EventHandlers, прикрепленным плагином farbtastic. Любая идея, как я мог бы сохранить код так же просто, как он есть, и не потерять какие-либо из событий, связанных с возвращенным?

Спасибо!

Answer 1

Я не знаком с этими плагинами / библиотеками, но я бы предложил следующее:

+ Изменить

 content:    function(){
    return $('<div/>').farbtastic(src);
 }

в

 content:    function(){
    return $('<div id="placeholder" />');
 }

и приложить farbtastic как раз перед звонком show:

.focus(function(e){

    src.data('data-default', src.val());

    $('.colorInput').each(function(){
        $(this).popover('hide');
    });

    $('<div id="placeholder" />').farbtastic(src);
    src.popover('show');
}