Javascript jQuery BeautyTips在引用的元素不是'；视图端口中的t

我们使用BeautyTips作为一种机制来创建各种气泡，以便与用户进行通信。例如，我们有一个帮助图标，显示一个包含更多信息的气泡。我们还使用BT显示错误和警告消息

下面是实际情况

您可以看到错误消息是一个叠在另一个上面的，并使它们的父消息枯萎

在form_validator中，我有一个用于errorPlacement参数的函数：

    errorPlacement: function (er, el) {
        if (el && el.length > 0) {
            if (el.attr('id') == 'ContractOpenEnded') {
                createErrorBubble($('#contractDuration'), er.text())
            }
            else {
                createErrorBubble($(el), er.text());
            }
        }
    }

以下是产生这些气泡的主要功能

function createErrorBubble(element, text) {    
    // In a conversation with pcobar the spec was changed for the bubbles to be to the right of the element
    createBubble(element, text, 2, "none", "right", "#fe0000", "#b2cedc", "#ffffff", true);
    element.btOn();
}

这里是createBubble函数

function createBubble(element, content, messageType, trigger, positions, fillColor, strokeColor, foreColor, useShadow) {
    var btInstance = element.bt(
        content,
        {
            trigger: trigger,
            positions: positions,
            shrinkToFit: true,
            spikeLength: 12,
            showTip: function (box) {
                $(box).fadeIn(100);
            },
            hideTip: function (box, callback) {
                $(box).animate({ opacity: 0 }, 100, callback);
            },
            fill: fillColor,
            strokeStyle: strokeColor,
            shadow: useShadow,
            clickAnywhereToClose: false,
            closeWhenOthersOpen: false, // Closing when others open hides page validation errors. This should be false.
            preShow: function (box) {
                if (messageType != 1) return;

                var whiteboard = $($(box).children()[0]);
                var content = whiteboard.html();

                if (content.substr(0, 5).toLowerCase() == "<div>") {
                    content = content.substr(5, content.length -11);
                }

                whiteboard.html('<div><span class="helpWarningPrefix">Warning:</span> ' + content + "</div>");
            },
            cssStyles: { color: foreColor },
            textzIndex: 3602, // z-index for the text
            boxzIndex: 3601, // z-index for the "talk" box (should always be less than textzIndex)
            wrapperzIndex: 3600
        });
}

函数createBubble（元素、内容、消息类型、触发器、位置、fillColor、strokeColor、foreColor、useShadow）{
var btInstance=element.bt(
所容纳之物
{
触发器：触发器，
职位:职位,，
shrinkToFit：是的，
穗长：12，
显示提示：功能（框）{
美元（框）。法代因（100）；
},
hideTip：函数（框，回调）{
$（框）。设置动画（{opacity:0}，100，回调）；
},
填充：填充颜色，
strokeStyle:strokeColor，
影子：使用影子，
单击任意位置关闭：false，
closeWhenOthersOpen:false，//当其他人打开时关闭隐藏页面验证错误。这应该是false。
演示前：功能（框）{
如果（messageType！=1）返回；
var whiteboard=$（$（box.children（）[0]）；
var content=whiteboard.html（）；
if（content.substr（0,5）.toLowerCase（）=“”）{
content=content.substr（5，content.length-11）；
}
html（'Warning:'+content+'）；
},
cssStyles:{color:foreColor}，
textzIndex:3602，//文本的z索引
boxzIndex:3601，//“talk”框的z索引（应始终小于textzIndex）
包装纸索引：3600
});
}

这个问题的答案是我

更新：

这实际上看起来更像是一个试图为不在页面可视区域的内容创建气泡的问题

---

编辑：更新了标题，以更清楚地反映问题的名称。

根据先前更新的实现（问题在屏幕外的元素中），我想出了一个“修复”的方法但问题是不雅观的，远不是最好的事情，因为我的猫进入工艺闪光，不知道发生了什么事

以下是黑客攻击：

errorPlacement: function (er, el) {
    if (el && el.length > 0) {
        if (el.attr('id') == 'ContractOpenEnded') {
            $('#contractDuration').focus();
            createErrorBubble($('#contractDuration'), er.text())
        }
        else {
            $(el).focus();
            createErrorBubble($(el), er.text());
        }
    }
},

这里的神奇之处在于.focus（）调用将元素带回视图端口