web-dev-qa-db-ja.com

初期化前にツールチップのメソッドを呼び出すことはできません

動的に作成された行に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");
}

どうすれば解決できますか？私を助けてください。

jquerytwitter-bootstrapjquery-uicompiler-errorsdynamic-data
12
MD. ABDUL Halim

私の中でjquery-ui.jsの前にbootstrap.jsを宣言すると、問題が発生することがわかりました。 bootstrap.jsの前にjquery-ui.jsが宣言されていることを確認してください。

10
omarjebari

Bootstrap.jsの前にjquery-ui.jsを宣言します

3
George Henrique

JQueryUIライブラリが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>
2
reformed

ウィジェットが初期化される前に、.tooltip('close')または.tooltip()を呼び出して、ツールチップウィジェットからメソッドを呼び出すことはできません（例：.tooltip({ })）。

DOM要素がツールチップウィジェットのインスタンスであることをテストすることで、このエラーを防ぐことができます。

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

もう1つのオプションは、$("#tp_no"+m).tooltip();ループ内の最初のものとしてwhile(m < 10)への呼び出しを移動して、ifステートメントがどのブランチをとっても、要素がツールチップウィジェットのインスタンスになるようにすることです。

2
Brett

Closeメソッドなどを呼び出す前に、要素が存在するかどうかを常に確認します。

If（$（myelem）.length> -1）何かをする

0
Judson Terrell

Bootstrap.jsの前にjquery-ui.jsを宣言すると、

TypeError：elem.getClientRectsはjQuery.fn.init.offsetの関数ではありません

0
Mike