Javascript jQuery可通过引导工具提示类型拖动错误：e.$元素为空

我有一个可拖动的元素，看到代码片段，点击图片添加pin，在mouseover上显示工具提示，并在mouseout上删除

下面的代码抛出数十个错误TypeError:e.$element在Firefox中为null或未捕获的TypeError:Chrome中一旦开始拖动pin元素，就无法读取null的属性“trigger”

我试过：

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

但这些都不能解决这个问题

拖动图元时，如何停止工具提示错误

var pic_wrapper=$'pic_wrapper'； var selected_picture=$‘selected_picture’； 所选图片。单击，功能E{ var pin=$； x=e.offsetX/$this.width*100+%； y=e.offsetY/$this.height*100+%； 别针；唯一； pic_包装器。附加销； pin.css{ 转换：'translate-50%，-50%' }; pin.css{ 左:x,， 顶部：y }.表演； 可拖动的{ 遏制：“家长” }; “dragstart”上的引脚，函数{ pin.css{ 转换：“translate0%，0%” }; }; “dragstop”上的pin、函数E、用户界面{ x=ui.position.left/pic_wrapper.width*100+%； y=ui.position.top/pic_wrapper.height*100+%； pin.css{ 左:x,， 顶部：y }; }; }; pic_wrapper.on'mouseenter'，'.pin'，function e{ $this.attr'title'，'tooltip text'； $this.tooltip{ 位置：functioncontext，source{ 返还权； } }; $this.tooltip'show'； }; pic_wrapper.on'mouseout'，'.pin'，function e{ $this.tooltip'destroy'； }; 包装纸{ 显示：块； 位置：相对位置； 填充：0； 边框：1px点0099ff； } 精选图片{ 宽度：100%； 高度：自动； 边框：1px实心0099ff； } 选定图片img{ 宽度：100%； 高度：自动； } .别针{ 显示：无； 位置：绝对位置； 填充：0； 保证金：0； 宽度：16px； 高度：16px； 边界半径：50%； 背景：ff4100； 光标：指针； 长方体阴影：0 rgba255,65,0,0.4； 动画：脉冲2s无限； } 尝试：

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

它应该会起作用

我认为出现此错误的原因是，当您执行$'.tooltip'.tooltip'destroy'时，它不会删除链接到工具提示的所有事件

更新：也需要更新

$(this).attr('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();
});

---

如果我这样做，它解决了这个问题，但又创建了另一个-现在我显示了两个工具提示：我需要的一个+下面的另一个，还有$this。工具提示“destroy”。remove实际上会删除pin本身，而不仅仅是工具提示。这不正常吗？或者我错过了什么？不，只要我开始拖动pin，它就会抛出很多错误我不知道该说什么，我尝试了firefox和chrome，控制台中没有任何错误…：怎么会？我看到几十个，如果不是几百个的话。有没有办法在这里附上照片？

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