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

除了一个巨大的细节之外，这一切都运作良好：当我通过

设置popover的内容时

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

返回的数据会被farbtastic插件附加的任何eventHandler条带化。知道如何保持代码尽可能简单，并且不会丢失附加到返回的任何事件吗？

谢谢！

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

具有远程颜色选择器内容的Twitter Bootstrap Popover.js会丢失附加的事件

1 个答案: