带有动态选择器的jQuery on（）

debugcn 发表于 Dev

弗兰克斯图纳

尝试使用jQuery on（）切换水平菜单的打开/关闭。

<ul id="mobile-header-left" class="app-btns">
    <li id="m-menu-btn" class="menu m-menu-btn-closed"><img src="img/m-menu.png" alt="Menu" /></li>
</ul>

/* Open */
$(".m-menu-btn-closed").click(function() {
    $("#m-menu-btn").removeClass("m-menu-btn-closed");
    $("#m-menu-btn").addClass("m-menu-btn-open");
    $("#m-menu").animate({left:'0'});
});

/* Close */
$("#mobile-header-left").on("click", ".m-menu-btn-open", function() {
    $("#m-menu-btn").removeClass("m-menu-btn-open");
    $("#m-menu-btn").addClass("m-menu-btn-closed");
    $("#m-menu").animate({left:'-75%'});
);

菜单打开确定，但我无法关闭它。我知道它与选择动态添加的类有关，但是在on（）工作时遇到了麻烦。

如果有人可以提供帮助，我们将不胜感激。

古法

m-menu-btn-closed从元素中删除类不会阻止打开菜单的click事件。它已经绑定到元素，因此它不受更改类的影响。

当您尝试关闭菜单时，用于打开菜单的事件处理程序也将被激活，并且您有两个相互竞争的动画。

您也可以将委托用于打开事件处理程序，然后在删除类时将其停用：

$("#mobile-header-left").on("click", ".m-menu-btn-closed", function() {

或者，您可以使用单个事件处理程序，并在其中确定单击按钮时的操作：

$("#m-menu-btn").click(function() {
  if ($(this).is(".m-menu-btn-closed")) {
    $(this).removeClass("m-menu-btn-closed").addClass("m-menu-btn-open");
    $("#m-menu").animate({left:'0'});
  } else {
    $(this).removeClass("m-menu-btn-open").addClass("m-menu-btn-closed");
    $("#m-menu").animate({left:'-75%'});
  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。