Question

我有一个可拖动元素（请参见代码段，然后单击图片以添加图钉），该元素在鼠标悬停时显示工具提示，在鼠标悬停时将其删除。

一旦我开始拖动pin元素，下面的代码就会在Firefox中引发数十个错误“ Chrome中的TypeError：e。$ element为null”或在Chrome中引发“ Uncaught TypeError：无法读取null的属性'trigger”。

我尝试过：

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

但是这些都不能解决。

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

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();
});

带有Bootstrap Tooltip TypeError的jQuery Draggable：e。$ element为null

1 个答案: