jQuery 单击 <a> 不会运行起作用

Question

我目前有一个 <a> witin <li>，点击它会打开一个子菜单。

我现在想做的是，当它的父项具有 .open 的 class 时，您单击 <a>，它会关闭。但是它不会开火。

HTML:

<li class="menu-item-has-children open">
    <a href="#">emerging market</a>
    <ul class="sub-menu">
        [sub menu stuff]
    </ul>
</li>

所以当您点击 .open a 时，它应该首先 hide sibling ul .sub-menu 然后 removeClass open 从 parent

jQuery

jQuery(".open a").click(
    function (){
        console.log('here!'); // this never seems to fire
        jQuery(this).sibling(".sub-menu").hide();
        jQuery(this).parent().removeClass("open");
});

JS Fiddle 显示（工作）打开功能但非工作关闭功能

http://jsfiddle.net/aa5brt5v/

Answer 1

尝试使用这个（事件委托）：

$( ".menu-item-has-children a" ).on( "click", ".open", function() {
 console.log('here!'); 
});

Answer 2

问题是因为事件是在 DOM就绪时分配的。那时没有 .open 元素，因为您在单击元素时添加了 class，这是在 DOMReady 已触发之后。相反，您可以在元素上使用单击事件。你也可以稍微整理一下你的逻辑和 DOM 遍历，试试这个：

$(".menu-item-has-children").click(function () {
    if ($(this).hasClass('open')) {
        $(this).removeClass("open").find(".sub-menu").hide();
    } else {
        $(this).addClass("open").find(".sub-menu").show();
    }
});

Updated fiddle

Answer 3

为什么不使用简单地切换子列表？

$(".menu-item-has-children").click(function() {
  $(this).find(".sub-menu").toggle();
});

/* Default is to hide sub menu */
ul.sub-menu {
  display: none;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="menu-item-has-children"> <a href="#">emerging market</a>
  <ul class="sub-menu">
    <li>[sub menu stuff]</li>
  </ul>
</li>

jQuery 单击 <a> 不会运行起作用

jQuery on click of <a> won't run function

jquery

click

parent

siblings

jQuery 单击 <a> 不会 运行 起作用

jQuery on click of <a> won't run function

jquery

click

parent

siblings

jQuery 单击 <a> 不会运行起作用