使用 Select2 的 jQuery UI 工具提示中未捕获的错误

Question

我正在使用jQuery UI 工具提示和Select2。我的代码如下。

let selectEle = cellEle.children("select").select2({
    //more code here
});

selectEle.on("select2:opening", function (e) {
            $(document).on('hover', '.select2-results__option', function () {           
              $(this).tooltip({
                position: {
                  my: "center bottom-20",
                  at: "center top",
                  using: function( position, feedback ) {
                    $(this).css(position);
                    var txt = $(this).text();
                    $(this).html(txt);
                    $( "<div>" )
                      .addClass( "arrow" )
                      .addClass( feedback.vertical )
                      .addClass( feedback.horizontal )
                      .appendTo( this );
                  }
                }
              });
            });
          });

selectEle.on("select2:closing", function (e) { 
  $('.select2-results__option').tooltip('close');
});

但我收到的是Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'。

Answer 1

你可以用这个：

$('.select2-results__option').hide();

而不是：

$('.select2-results__option').tooltip('close');

请记住，您的所有 jquery 代码都应该在 $(document).ready(function () { // here }) 函数中，如下所示：

$(document).ready(function () {
let selectEle = cellEle.children("select").select2({
    //more code here
});

selectEle.on("select2:opening", function (e) {
            $(document).on('hover', '.select2-results__option', function () {           
              $(this).tooltip({
                position: {
                  my: "center bottom-20",
                  at: "center top",
                  using: function( position, feedback ) {
                    $(this).css(position);
                    var txt = $(this).text();
                    $(this).html(txt);
                    $( "<div>" )
                      .addClass( "arrow" )
                      .addClass( feedback.vertical )
                      .addClass( feedback.horizontal )
                      .appendTo( this );
                  }
                }
              });
            });
          });

   selectEle.on("select2:closing", function (e) { 
      $('.select2-results__option').hide();
   });
})