Question

我使用Tooltipster来显示用户可以点击的项目列表，以便将项目输入文本区域。创建工具提示后，我会获得包含selectors = $("ul.alternates > li");

的项目列表

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

我有一个错误here的Codepen，应该让它更清晰。

＆＃13;

// 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" }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

{{1}}

然后再次点击..

Answer 2

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

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

在显示工具提示之前，将单击处理程序附加到DOM中存在的任何内容。（将其置于functionReady之外。无需使用tooltipspter()。）

示例：的

functionReady

这是Codepen。

每次触发functionReady时解除绑定并绑定事件。

示例：的

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

这是Codpen。

Tooltipster内容每次打开时都会翻倍

2 个答案: