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

Posted 2023-05-08

【中文标题】带有 farbtastic 颜色选择器内容的 Twitter Bootstrap Popover.js 丢失了附加的事件

【英文标题】：Twitter Boostrap Popover.js with farbtastic color picker content looses events attached

【发布时间】：2011-12-29 17:40:17

【问题描述】：

我正在使用来自 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 插件附加的任何事件处理程序条带化。 知道如何保持代码尽可能简单，并且不丢失任何附加到返回的事件吗？

谢谢！

【参考方案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');