Javascript 为什么在单击按钮时附加了多个元素？

我只是添加了一个

span

作为文本选择的父级。我有两种方式，一种是点击按钮，另一种是点击弹出按钮（选择时会出现）

当我多次单击弹出按钮时，我将获得与所选内容的父级相同的（多次）跨距

如何解决这个问题？有人帮我吗

myjs：

您正在（重新）注册

处理程序。每次调用
.mouseup
处理程序时，单击
处理程序

只需在处理程序之外执行一次

Aldo，不要在调用
selHTML（）
的过程中编写
$（）
——它正在调用jQuery，但如果您放弃结果，则不会产生任何效果

$("button").on('click', function(){
          selHTML(); //it won't call multiple times... :)
      });

$("div.content").mouseup(function(event) {
    var range = window.getSelection().getRangeAt(0);
    if (!range.collapsed) {
      var bounds = range.getBoundingClientRect();
      var x = bounds.left + ((bounds.right - bounds.left - $(".savetooltipAll").outerWidth()) / 2);
      var y = bounds.top - $(".savetooltipAll").outerHeight() + $(window).scrollTop();

      $(".savetooltipAll").css("top", (y+(bounds.top)) + 'px');
      $(".savetooltipAll").css("left",x + 'px');
      $(".savetooltipAll").show();

  } else {
      $(".savetooltipAll").hide();
  }
});

$("button").on('click', function(){
          selHTML(); //it won't call multiple times... :)
      });

$("div.content").mouseup(function(event) {
    var range = window.getSelection().getRangeAt(0);
    if (!range.collapsed) {
      var bounds = range.getBoundingClientRect();
      var x = bounds.left + ((bounds.right - bounds.left - $(".savetooltipAll").outerWidth()) / 2);
      var y = bounds.top - $(".savetooltipAll").outerHeight() + $(window).scrollTop();

      $(".savetooltipAll").css("top", (y+(bounds.top)) + 'px');
      $(".savetooltipAll").css("left",x + 'px');
      $(".savetooltipAll").show();

  } else {
      $(".savetooltipAll").hide();
  }
});