无法在初始化之前调用工具提示上的方法答案

【问题标题】：Cannot call methods on tooltip prior to initialization无法在初始化之前调用工具提示上的方法
【发布时间】：2013-11-27 00:23:46
【问题描述】：

我正在使用 jQuery 工具提示动态创建行（可以是 10 行/更多行）

工具提示显示正常，但关闭不正常。

错误如下，

Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'

throw new Error( msg );

while(m < 10){

  .......................................
  .......................................

  if(data =="EXIST")
  {
    display_tp_tooltip(m);
    $("#tp_no"+m).val("");
  }
  else
  {
    display_tp_tooltip_close(m);
  }
}

function display_tp_tooltip(m)
{
   $("#tp_no"+m).tooltip();
   $("#tp_no"+m).tooltip({
        open: function (e, o) {
        o.tooltip.animate({ top: o.tooltip.position().top + 10 }, "fast" );
        $(o.tooltip).mouseover(function (e) {
            $("#tp_no"+m).tooltip('close');
        });
        $(o.tooltip).mouseout(function (e) {});
        },

        position: {
        my: "center bottom-20",
        at: "center top",
        using: function( position, feedback ) {
            $( this ).css( position );
            $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .append($('<style>.ui-tooltip,.arrow:after { background:red; }</style>'))
            .appendTo( this );
          }
        },
        content: function() { return cellTpNoTooltipContent()},
        close: function (e, o) {},
        show: {
          duration: 800
        }

   });

   $("#tp_no"+m).tooltip('open');
       setTimeout(function () {
       $(this).tooltip('close'); //close the tooltip
       }, 3000);
}

function cellTpNoTooltipContent()
{
  var rval = "T.P No. is exist";
  return rval;
}

function display_tp_tooltip_close(m)
{
  $("#tp_no"+m).tooltip("close");
}

我该如何解决？请帮帮我。

【问题讨论】：

您的错误已经解释过了，您在 else 语句中立即调用 close 方法，我们无能为力，因为我们不知道 EXIT 来自哪里以及您的代码逻辑
存在来自输入验证。 Exist 使用 ajax 从数据库中正确检查，当 Exist 没有出现时，我会通过 alert 进行检查，它工作正常。但是当调用 display_tp_tooltip_close 函数并关闭工具提示时，它会在上面显示问题。
好的，有道理。然后，查看this SO question 并查看 john 发布的未接受的答案。它可能会有所帮助。

标签： jquery twitter-bootstrap jquery-ui compiler-errors dynamic-data

【解决方案1】：

我发现在我的 jquery-ui.js 之前声明 bootstrap.js 会导致问题。确保 jquery-ui.js 在 bootstrap.js 之前声明。

【讨论】：

这也是我的问题，但如果我替换它们，我无法让其他东西工作：/
就是这样！ :-)

【解决方案2】：

您需要防止 jQuery UI 库覆盖 jQuery.fn.tooltip。

所以在加载 jQuery UI 库之前缓存这个值，然后再恢复它：

<script>
    let _tooltip = jQuery.fn.tooltip; // <--- Cache this
</script>
<script src="/path/to/jquery-ui.min.js"></script> <!-- load jQuery UI -->
<script>
    jQuery.fn.tooltip = _tooltip; // <--- Then restore it here
</script>

【讨论】：

在 bootstrap.js 之前拥有 jquery-ui.js 对我不起作用。同样的错误。但是，此修复程序确实做到了。谢谢。

【解决方案3】：

在 bootstrap.js 之前声明 jquery-ui.js

【讨论】：

【解决方案4】：

在小部件初始化之前，您不能从工具提示小部件（例如 .tooltip('close') ）调用方法，无论是调用 .tooltip() 还是 .tooltip({ })

您可以通过测试 DOM 元素是否是工具提示小部件的实例来防止此错误：

if($("#tp_no"+m).is(':ui-tooltip')){
  $("#tp_no"+m).tooltip("close");
}

另一种选择是将调用移动到$("#tp_no"+m).tooltip(); 作为while(m < 10) 循环中的第一件事，以确保无论您的if 语句采用哪个分支，该元素都将是工具提示小部件的一个实例

【讨论】：

会不会更短为：$("#tp_no"+m+" ui-tooltip").tooltip("close");？
感谢 .is(':ui-tooltip')

【解决方案5】：

我总是在调用 close 方法等之前检查元素是否存在。

如果($(myelem).length > -1) 做某事

【讨论】：

我的问题不是该元素不存在，而是附加到它的工具提示尚未初始化。 @Brett 的回答为我解决了这个问题。

【解决方案6】：

在 bootstrap.js 之前声明 jquery-ui.js 也解决了我的问题

TypeError: elem.getClientRects is not a function at jQuery.fn.init.offset

【讨论】：