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

问题描述

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

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

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

要查看原始状态，添加按钮和切换，第三切换回的不同场景，只需在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;
}

标签： javascriptjquery

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

问题描述

解决方案

推荐阅读