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

Question

我有一个网站，其中有一些图标/按钮，当您单击它们时会触发一个简单的菜单。但是，我需要能够加载更多数据，使用更多这些按钮，并且由于现有按钮是使用 jquery onclick 使用函数初始化的，所以我想每当按钮数量发生变化时我都会重新运行该函数.

我预计现有的 onclick 函数会被简单地覆盖，内容与以前相同。尽管它不是最佳代码，但我希望它能够快速且简单地运行。

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

I made a JSFiddle, showing what I mean:

要查看原始状态、添加按钮和切换以及第三次切换回来的不同场景，只需注释掉 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

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

我强烈推荐使用 Event Delegation原因如下:

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

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

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

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() 中删除该调用code> 方法，以及来自 $(document).ready( ... ) 的第二次调用。