jquery - 带有 farbtastic 颜色选择器内容的 Twitter Bootstrap Popover.js 丢失附加事件

Question

我正在使用 Twitter 的 Bootsrap，这很酷。然而，我有一个小问题。我正在尝试使用 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);

返回的数据会与farbtastic 插件附加的任何事件处理程序进行 strip 化。知道如何使代码尽可能简单，并且不丢失附加到返回的任何事件吗？

谢谢!

Answer 1

我不熟悉这些插件/库，但我建议如下:

改变

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

至

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

并在调用show之前附加farbtastic:

.focus(function(e){

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

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

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