工具提示内容每次打开时都会加倍

Question

我正在使用 Tooltipster 来显示项目列表，用户可以单击这些项目以将项目输入文本区域。创建工具提示后，我得到它的项目列表 selectors = $("ul.alternates > li");

但是，每次打开工具提示时，点击的项目都会被插入相应的次数；例如，如果我打开工具提示 5 次，则单击的项目将被插入 5 次。在使用 functionAfter: function() {selectors = null;} 关闭工具提示后，我尝试删除变量的值，但这没有效果。

我有错误 here 的 Codepen，应该更清楚。

// set list to be tooltipstered
$(".commands > li").tooltipster({
 interactive: true,
 theme: "tooltipster-light",
 functionInit: function(instance, helper) {
  var content = $(helper.origin).find(".tooltip_content").detach();
  instance.content(content);
 },
 functionReady: function() {
  selectors = $("ul.alternates > li");
  $(selectors).click(function() {
   var sampleData = $(this).text();
   insertText(sampleData);
  });
 },
 // this doesn't work
 functionAfter: function() {
  selectors = null;
 }
});

// Begin inputting of clicked text into editor
function insertText(data) {
 var cm = $(".CodeMirror")[0].CodeMirror;
 var doc = cm.getDoc();
 var cursor = doc.getCursor(); // gets the line number in the cursor position
 var line = doc.getLine(cursor.line); // get the line contents
 var pos = {
  line: cursor.line
 };
 if (line.length === 0) {
  // check if the line is empty
  // add the data
  doc.replaceRange(data, pos);
 } else {
  // add a new line and the data
  doc.replaceRange("\n" + data, pos);
 }
}

var code = $(".codemirror-area")[0];
var editor = CodeMirror.fromTextArea(code, {
 mode: "simplemode",
 lineNumbers: true,
 theme: "material",
 scrollbarStyle: "simple",
 extraKeys: { "Ctrl-Space": "autocomplete" }
});

body {
 margin: 1em auto;
 font-size: 16px;
}
.commands {
 display: inline-block;
}
.tooltip {
 position: relative;
 opacity: 1;
 color: inherit;
}
.alternates {
 display: inline;
 margin: 5px 10px;
 padding-left: 0;
}

.tooltipster-content .alternates {
 li {
  list-style: none;
  pointer-events: all;
  padding: 15px 0;
  cursor: pointer;
  color: #333;
  border-bottom: 1px solid #d3d3d3;
  span {
   font-weight: 600;
  }
  &:last-of-type {
   border-bottom: none;
  }
 }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/theme/material.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/235651/jquery-3.2.1.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/235651/tooltipster.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/addon/mode/simple.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/addon/hint/show-hint.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/addon/scroll/simplescrollbars.js"></script>
<div class="container">
 <div class="row">
   <div class="col-md-6">
   <ul class="commands">
   <li><span class="command">Hover for my list</span><div class="tooltip_content">
    <ul class="alternates">
     <li>Lorep item</li>
     <li>Ipsum item</li>
     <li>Dollar item</li>
    </ul>
   </li>
   </div>
   </ul>
  </div>
  <div class="col-md-6">
   <textarea class="codemirror-area"></textarea>
  </div>
 </div>
</div>

Answer 1

您每次都在绑定新的点击。我会建议不同的代码风格，但在那种格式下，您可以在点击事件之前添加

$(selectors).unbind('click');

然后再次点击..

Answer 2

工具提示的 functionReady 每次将工具提示添加到 DOM 时都会触发，这意味着每次用户将鼠标悬停在列表上时，您都会再次绑定事件。

这里有两种方法可以防止这种情况发生：

在显示工具提示之前，将点击处理程序附加到 DOM 中存在的任何内容。（放在tooltipspter()外面。不需要用functionReady。）

示例：

$(document).on('click','ul.alternates li', function(){
    var sampleText = $(this).text();
    insertText(sampleText);
})

这是 Codepen。

每次触发 functionReady 时取消绑定和绑定事件。

示例：

functionReady: function() {
    selectors = $("ul.alternates > li");
    $(selectors).off('click').on('click', function() {
        var sampleData = $(this).text();
        insertText(sampleData);
    });
}

这是一个Codpen。

工具提示内容每次打开时都会加倍

Tooltipster content doubling up each time it is opened

javascript

jquery

tooltipster