Question

我不知道为什么这不起作用。好像这么简单的概念。单击按钮时，我会切换一些类。这些类只控制文本open menu和close menu的显示。该部分正在运行，但是，当按钮在其处于打开状态时单击按钮时，我需要运行一些其他脚本。当我点击按钮时它有opened类，那么button.opened点击功能中没有任何内容发生..它只是运行button.closed函数。我做错了什么？

https://jsfiddle.net/dmcgrew/sfvhtahq/7/

$("button.closed").on("click", function(){
	console.log("open the menu");
  
  $(this).toggleClass("opened");
  $(this).toggleClass("closed");
});

$("button.opened").on("click", function(){
  //why does nothing in here happen?
	console.log("close the menu");
  
  $(this).toggleClass("opened");
  $(this).toggleClass("closed");
});

.expand {width:100px; height:100px; background:red; display:block;}

.close, .open {display:none;}

.opened .close {display:inline;}
.closed .open {display:inline;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="expand closed"><span class="open">open menu</span><span class="close">close menu</span></button>

Answer 1

当您分配这些事件处理程序时，不存在类“已打开”的按钮，因此该事件不会附加到任何事件。

解决此问题的最简单方法是将委派的事件处理程序分配给已经存在的DOM元素。现在，分配处理程序时是否存在button.closed或button.opened并不重要;当事件发生时，它将检查子节点是否存在。

（实际上最好不要挂起body上的所有内容;选择一个DOM节点，它是您委派给的节点的一个较近的父节点，但现在主体会这样做：）

$("body").on("click", "button.closed", function(){
  console.log("open the menu");
  $(this).toggleClass("opened");
  $(this).toggleClass("closed");
});

$("body").on("click", "button.opened", function(){
  console.log("close the menu");
  $(this).toggleClass("opened");
  $(this).toggleClass("closed");
});

.opened .open, .closed .close {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="expand closed">
    <span class="open">open menu</span>
    <span class="close">close menu</span>
</button>

同时：很少有两个独立的类控制相同的状态变化。将一个状态视为默认状态，并仅为其他状态添加CSS规则：

$('body').on("click", "button", function() {
  $(this).toggleClass("opened");
  if ($(this).hasClass('opened')) {
    console.log("opened the menu")
  } else {
    console.log("closed the menu")
  }
});

.expand .close,
.expand.opened .open {
  display: none
}

.expand.opened .close {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="expand">
    <span class="open">open menu</span>
    <span class="close">close menu</span>
</button>

Answer 2

由于分配时按钮上不存在.opened类，因此您必须使用事件委派方法。像这样：

<div class="dynamic-button">
    <button class="expand closed">
        <span class="open">open menu</span>
        <span class="close">close menu</span>
    </button>
</div>

$(".dynamic-button").on("click", "button.closed", function(){
    console.log("open the menu");

  $(this).toggleClass("opened");
  $(this).toggleClass("closed");
});

$(".dynamic-button").on("click", "button.opened", function(){
  console.log("close the menu");

  $(this).toggleClass("opened");
  $(this).toggleClass("closed");
});

有关更多说明，请详细了解$.on()。

Answer 3

首先尝试解除对click事件的绑定，然后重新绑定它。

$("button.opened").off("click").on("click", function(){
  console.log("close the menu");

  $(this).toggleClass("opened");
  $(this).toggleClass("closed");
});

jQuery函数.on（“click”）在触发类时不起作用

3 个答案: