Jquery 未触发“调整大小”时单击事件

我在调整窗口大小时遇到了一些与某个单击事件有关的问题

下面是总结：

当屏幕小于某个值时，具有子ul元素的li项将接收一个类，单击该li项将向其自身添加一个类； 相同的条件将应用于init，只是为了检查我们是否在该屏幕值中 问题是：

在init上，当条件不满足时，单击不应该做任何事情；但是在resize上，当该条件满足时，它应该运行，这是我的问题：当该条件满足时，它不会在resize上运行 反之亦然：当满足条件时，会发生调整大小的操作，并且不再满足该条件，单击将不起作用； 我已经做了一个例子来说明我的问题；只需向上/向下缩小“结果”窗口即可检查条件

任何想法或建议都非常受欢迎， 谢谢

加价：

<nav class='navigation-wrap'>
    <ul>
        <li>
            <a href='#'>Link</a>
        </li>
        <li>
            <a href='#'>Link with childs</a>
            <ul>
                <li>
                    <a href='#'>Link</a>
                </li>
                 <li>
                    <a href='#'>Link</a>
                </li>
           </ul>
        </li>
    </ul>
</nav>

你需要：

事件委派允许我们将单个事件侦听器附加到父元素，该事件侦听器将为与选择器匹配的所有子体触发，无论这些子体现在存在还是将来添加

在动态添加class mobile nav时，需要使用。您必须使用委托事件方法

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。通过选择一个在附加委托事件处理程序时保证存在的元素

代码

---

抱歉，但我必须问-添加类的目的只是为了改变导航的样式，还是您更改颜色的示例只是为了演示？因为提供的示例可以使用css完成，只需使用媒体查询即可

---

在屏幕很小的情况下，您需要它们来针对javascript中的一些新行为，然后正如其他人所说的，使用事件委托将解决这个问题。

可能是一个误解-但是为什么您会说“在init上，当条件不满足时”？我不能在一个小窗口里打开这一页吗？这真的应该取决于调整大小事件还是取决于窗口的大小？好吧，当页面加载并且满足该条件时，会发生单击，否则不应该执行任何操作。当你调整windowIm的大小时也是如此，一个js新手：是的，它可以用mq来完成，但这只是一个例子，在真实的画面中，事情发生了不同，但这是我的问题：该死的事件委派；阅读关于它的atm：是的，这就是我一直在寻找的。Thnx！

if ( $(window).width()<800 ){
    $('.navigation-wrap li:has(ul)').addClass('mobile-nav');
        }else{
    $('.navigation-wrap li:has(ul)').removeClass('mobile-nav');
};

$( window ).resize(function() {
    if ( $(window).width()<800 ){
        $('.navigation-wrap li:has(ul)').addClass('mobile-nav');
    }else{
        $('.navigation-wrap li:has(ul)').removeClass('mobile-nav');
    };
 });

$('li.mobile-nav > a').click(function(e) {
    $(this).parent().toggleClass('mobile-nav-is-triggered');
    return false;
});

.mobile-nav{
    background: red;
}
.mobile-nav-is-triggered{
    background: green;
}

$(document).on('click','li.mobile-nav > a',function(e) {
  $(this).parent().toggleClass('mobile-nav-is-triggered');
  return false;
});

$('.navigation-wrap').on('click', 'li.mobile-nav > a', function(e) {
    $(this).parent().toggleClass('mobile-nav-is-triggered');
    return false;
});