Tooltipster content doubling up each time it is opened

Question

I'm using Tooltipster to show a list of items that the user can click so as to enter the item into a textarea. When a tooltip is created, I get its list of items with selectors = $("ul.alternates > li");

However, each time a tooltip is opened the item clicked will be inserted a corresponding number of times; for example if I've opened a tooltip 5 times then the item clicked will be inserted 5 times. I've tried deleting the variable's value after a tooltip is closed with functionAfter: function() {selectors = null;} but that had no effect.

I have a Codepen of the error here that should make it clearer.

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

Tooltipster's functionReady fires every time the tooltip is added to the DOM, which means every time a user hovers over the list, you are binding the event again.

Here are two ways to prevent this from happening:

1. Attach a click handler to anything that exists in the DOM before the tooltip is displayed. (Put it outside of tooltipspter(). No need to use functionReady.)

Example:

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

Here's a Codepen.

2. Unbind and bind the event each time functionReady is triggered.

Example:

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

Here's a Codpen.