带有引导工具提示类型错误的 jQuery Draggable：e.$element 为 null

Posted 2023-05-08

【中文标题】带有引导工具提示类型错误的 jQuery Draggable：e.$element 为 null

【英文标题】：jQuery Draggable with Bootstrap Tooltip TypeError: e.$element is null

【发布时间】：2018-12-01 22:25:06

【问题描述】：

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

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

我试过了：

$('.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>

【参考方案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();
);

【讨论】：

如果我这样做，它会解决这个问题，但随后会创建另一个 - 现在我显示了 2 个工具提示：我需要的一个 + 下面的另一个，以及 $(this).tooltip('destroy ').remove() 实际上删除了图钉本身，而不仅仅是工具提示

check this bin 这不是很好吗？还是我错过了什么？

不，一旦我开始拖动图钉，就会引发很多错误

我不知道该说什么，我用firefox和chrome都试过了，控制台没有任何错误... :(

怎么回事？我看到了几十个，如果不是几百个。有什么办法可以在这里附上图片吗？