jQuery Draggable with Bootstrap Tooltip TypeError: e.$element is null

Question

我有一个可拖动元素（查看代码片段并单击图片以添加图钉），它在鼠标悬停时显示工具提示并在鼠标移开时将其删除。

只要我开始拖动 pin 元素，下面的代码就会在 Firefox 中抛出数十个错误 "TypeError: e.$element is null" 或在 Chrome 中抛出 "Uncaught TypeError: Cannot read property 'trigger' of null"。

我试过了：

$('.tooltip').remove();
$('.tooltip').tooltip('destroy');
$('.pin').tooltip('destroy');

但其中 none 个解决了这个问题。

拖动元素时如何停止工具提示错误？

var pic_wrapper = $('#pic_wrapper');

var selected_picture = $('#selected_picture');

selected_picture.on('click', function(e) {
  var pin = $('<div class="pin"></div>');
  x = ((e.offsetX) / $(this).width()) * 100 + "%";
  y = ((e.offsetY) / $(this).height()) * 100 + "%";
  pin.uniqueId();
  pic_wrapper.append(pin);
  pin.css({
    transform: 'translate(-50%, -50%)'
  });
  pin.css({
    left: x,
    top: y
  }).show();
  pin.draggable({
    containment: 'parent'
  });
  pin.on('dragstart', function() {
    pin.css({
      transform: 'translate(0%, 0%)'
    });
  });
  pin.on('dragstop', function(e, ui) {
    x = (ui.position.left / pic_wrapper.width()) * 100 + "%";
    y = (ui.position.top / pic_wrapper.height()) * 100 + "%";
    pin.css({
      left: x,
      top: y
    });
  });
});

pic_wrapper.on('mouseenter', '.pin', function(e) {
  $(this).attr('title', 'tooltip text');
  $(this).tooltip({
    placement: function(context, source) {
      return "right";
    }
  });
  $(this).tooltip('show');
});

pic_wrapper.on('mouseout', '.pin', function(e) {
  $(this).tooltip('destroy');
});

#pic_wrapper {
  display: block;
  position: relative;
  padding: 0;
  border: 1px dotted #0099ff;
}

#selected_picture {
  width: 100%;
  height: auto;
  border: 1px solid #0099ff;
}

#selected_picture img {
  width: 100%;
  height: auto;
}

.pin {
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff4100;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(255, 65, 0, 0.4);
  animation: pulse 2s infinite;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<fieldset>
  <div class="col-xs-12">
    <div class="form-group">
      <div id="pic_wrapper">
        <div id="selected_picture">
          <img src="http://www.outline-world-map.com/map-images-original/blank-thin-gray-white-world-map-b9a.png" />
        </div>
      </div>
    </div>
  </div>
</fieldset>

Answer 1

试试：

 $('.tooltip').tooltip('destroy').remove();

它应该可以解决问题

我认为您收到此错误的原因是，当您执行 $('.tooltip').tooltip('destroy') 时，它并没有删除链接到工具提示的所有事件.

更新：也要更新

$(this).attr('title', 'tooltip text');

和

$(this).attr('data-original-title', 'tooltip text');

否则显示 2 个工具提示！

完整的 JS 代码：

var pic_wrapper = $('#pic_wrapper');

var selected_picture = $('#selected_picture');

selected_picture.on('click', function(e) {
  var pin = $('<div class="pin"></div>');
  x = ((e.offsetX) / $(this).width()) * 100 + "%";
  y = ((e.offsetY) / $(this).height()) * 100 + "%";
  pin.uniqueId();
  pic_wrapper.append(pin);
  pin.css({
    transform: 'translate(-50%, -50%)'
  });
  pin.css({
    left: x,
    top: y
  }).show();
  pin.draggable({
    containment: 'parent'
  });
  pin.on('dragstart', function() {
    pin.css({
      transform: 'translate(0%, 0%)'
    });
  });
  pin.on('dragstop', function(e, ui) {
    x = (ui.position.left / pic_wrapper.width()) * 100 + "%";
    y = (ui.position.top / pic_wrapper.height()) * 100 + "%";
    pin.css({
      left: x,
      top: y
    });
  });
});

pic_wrapper.on('mouseenter', '.pin', function(e) {
  $(this).attr('data-original-title', 'tooltip text');
  $(this).tooltip({
    placement: function(context, source) {
      return "right";
    }
  });
  $(this).tooltip('show');
});

pic_wrapper.on('mouseout', '.pin', function(e)
{
  $('.tooltip').tooltip('destroy').remove();
});

jQuery Draggable with Bootstrap Tooltip TypeError: e.$element is null

jQuery Draggable with Bootstrap Tooltip TypeError: e.$element is null

javascript

jquery

jquery-ui

tooltip

draggable