如果多次運行初始化，為什么我的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();
});