如果多次运行初始化，为什么我的jquery onclick函数会打开和关闭？

Question

我有一个带有一些图标/按钮的网站，当您单击它们时会触发一个简单的菜单。 但是，我需要能够使用这些按钮中的更多按钮来加载更多数据，并且由于现有按钮是使用jquery onclick函数初始化的，因此我认为只要更改按钮数量，我都将重新运行该函数。 。

我希望现有的onclick函数可以被简单地覆盖，内容与以前相同。 即使它不是最佳代码，我也希望它能快速，简单地工作。

但是后来我发现运行onclick初始化函数只是切换工作元素。 换句话说，新生成的元素现在可以使用，而现有元素则不能。 第三次调用该函数会将其全部切换回原来的位置，这意味着原始功能有效，但新功能无效。 这让我感到困惑。

我做了一个JSFiddle，展示了我的意思：

要查看原始状态的不同情况，请添加按钮并进行切换，然后再进行第三次切换回去，只需在javascript中的文档就绪功能中注释掉行即可

$(document).ready(function() {
  initContextMenuButtons(); //initializes cog-icon buttons
  addThirdButton(); //adds a third button, and calls init again, toggling all
  initContextMenuButtons(); //toggles back
});

HTML：

<div id="wrapper">
  <div class="relative-wrapper">
    <i class="fa fa-2x fa-cog context-menu-button"></i>
    <div class="tooltip-wrapper">
      <div class="tooltip">
        <div class="edit-button"><i class="fa fa-fw fa-pencil-square-o" aria-hidden="true"></i>Edit button</div>
        <div class="delete-button"><i class="fa fa-fw fa-trash-o" aria-hidden="true"></i> Delete button</div>
        <div class="close-button"><i class="fa fa-fh fa-times" aria-hidden="true"></i></div>
        <div class="tooltip-arrow-wrapper"><b class="tooltip-arrow"></b></div>
      </div>
    </div>
  </div>
  <div class="relative-wrapper">
    <i class="fa fa-2x fa-cog context-menu-button"></i>
    <div class="tooltip-wrapper">
      <div class="tooltip">
        <div class="edit-button"><i class="fa fa-fw fa-pencil-square-o" aria-hidden="true"></i>Edit button</div>
        <div class="delete-button"><i class="fa fa-fw fa-trash-o" aria-hidden="true"></i> Delete button</div>
        <div class="close-button"><i class="fa fa-fh fa-times" aria-hidden="true"></i></div>
        <div class="tooltip-arrow-wrapper"><b class="tooltip-arrow"></b></div>
      </div>
    </div>
  </div>
</div>

Javascript：

$(document).ready(function() {
  initContextMenuButtons();
  addThirdButton();
  initContextMenuButtons();
});

function initContextMenuButtons() {
  $('.context-menu-button').click(function() {
    var this_wrapper = $(this).siblings(".tooltip-wrapper").toggle();
    $(".tooltip-wrapper").not(this_wrapper).hide();
  });

  $('.tooltip .close-button').click(function() {
    $(this).closest(".tooltip-wrapper").hide();
  });
}

function addThirdButton() {
  var html = ' <div class="relative-wrapper">' +
    '<i class="fa fa-2x fa-cog context-menu-button"></i>' +
    '<div class="tooltip-wrapper">' +
    '<div class="tooltip">' +
    '<div class="edit-button"><i class="fa fa-fw fa-pencil-square-o" aria-hidden="true"></i>Edit button</div>' +
    '<div class="delete-button"><i class="fa fa-fw fa-trash-o" aria-hidden="true"></i> Delete button</div>' +
    '<div class="close-button"><i class="fa fa-fh fa-times" aria-hidden="true"></i></div>' +
    '<div class="tooltip-arrow-wrapper"><b class="tooltip-arrow"></b></div>' +
    '</div>' +
    '</div>' +
    '</div>'
  $('#wrapper').append(html);
  initContextMenuButtons();
}

CSS：

.relative-wrapper {
  position: relative;
}

.tooltip .close-button {
  position: absolute;
  top: 0px;
  right: 1px;
  color: #999;
}

.tooltip .close-button:hover {
  color: #555;
}

.tooltip-wrapper {
  display: none;
  position: absolute;
  top: -6px;
  left: 38px;
  z-index: 1;
}

.tooltip {
  transition: none 0s ease 0s;
  width: 200px;
  height: 55px;
  background-color: rgb(246, 246, 246);
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;
}

.tooltip .edit-button {
  position: absolute;
  top: 7px;
  left: 8px;
  width: 185px;
  cursor: pointer;
}

.milestone-tooltip .edit-button:hover {
  background-color: #ddd;
}

.tooltip .delete-button {
  position: absolute;
  top: 28px;
  left: 6px;
  width: 185px;
  cursor: pointer;
}

.tooltip .delete-button:hover {
  background-color: #ddd;
}

.tooltip-arrow-wrapper {
  height: 24.8px;
  width: 16px;
  display: block;
  transition: none 0s ease 0s;
  left: -14px;
  top: 11px;
  position: absolute;
}

.tooltip-arrow {
  height: 10px;
  width: 10px;
  border-top: 1px solid rgb(187, 187, 187);
  border-left: 1px solid rgb(187, 187, 187);
  background-color: rgb(246, 246, 246);
  transform: translate(8px, 4px) rotate(-45deg);
  position: absolute;
}

.context-menu-button {
  cursor: pointer;
}

Answer 1

您的事件侦听器加起来。 要使多个初始化有效，您可以先删除现有的初始化。

$('.context-menu-button').off().click(function() {
// ...
$('.tooltip .close-button').off().click(function() {

通常，您还可以使用名称空间来防止意外删除其他事件侦听器。

$('.context-menu-button').off('.init').on('click.init', function() {
// ...
$('.tooltip .close-button').off('.init').on('click.init', function() {

Answer 2

现有的事件处理程序不会被覆盖。 新的事件处理程序只是堆叠在它们之上。 现在，单击一次即可多次触发该事件。

由于以下原因，我强烈建议使用事件委托 ：

• 动态创建的元素将起作用 。 无需附加新事件。

• 假设使用当前方法，如果您有10个元素，则为10个事件处理程序。 事件委托允许您只有1个元素，无论您有1个元素还是1,000。

• 它与您现有的代码几乎相同。 您只是将事件附加到document而不是元素本身。

function initContextMenuButtons() {
  $(document).on('click', '.context-menu-button', function() {
    var this_wrapper = $(this).siblings(".tooltip-wrapper").toggle();
    $(".tooltip-wrapper").not(this_wrapper).hide();
  });

  $(document).on('click', '.tooltip .close-button', function() {
    $(this).closest(".tooltip-wrapper").hide();
  });
}

initContextMenuButtons()现在应该只有一次整个页面的生命解雇，所以一定要你从解除呼叫addThirdButton()方法，以及从你的第二个电话$(document).ready( ... )

Answer 3

解：

删除initContextMenuButtons（）函数及其引用。 添加以下代码。

 $('#wrapper').on('click', '.context-menu-button', function () {
  var this_wrapper = $(this).siblings(".tooltip-wrapper").toggle();
      $(".tooltip-wrapper").not(this_wrapper).hide();
});

$('#wrapper').on('click', '.tooltip .close-button', function() {
    $(this).closest(".tooltip-wrapper").hide();
});