Question

我在某个点击事件上遇到一些困难，在窗口调整大小时。

这是破败：

当屏幕小于某个值时，具有子ul元素的li项将收到一个类，点击该li项将为自己添加一个类;
同样的条件将应用于init，只是为了检查我们是否处于该屏幕值

问题：

在init上，当条件不满足时，点击不应该做任何事情;但是在调整大小时，当满足该条件时，它应该运行，这是我的问题：当条件满足时它不会在调整大小时运行
反之亦然：当条件满足时，发生调整大小，不再符合条件，点击不起作用;

我做了一个jsfiddle来说明我的问题;只需缩小/缩小结果窗口以检查条件

任何想法或建议都受到欢迎，谢谢！

加价：

<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>

js：

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;
});

css：

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

Answer 1

您需要event delegation：

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

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

<强> Demo

Answer 2

在动态添加课程mobile-nav时，您需要使用Event Delegation。您必须使用委托事件方法来使用.on()。

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

代码的

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

DEMO

Answer 3

很抱歉，但我不得不问 - 添加课程的目的只是为了不同地设置导航风格，还是仅仅为了演示更改颜色的示例？因为提供的示例可以使用媒体查询完成css。

在屏幕很小的时候，你需要它们来定位javascript中的一些新行为，然后正如其他人所说的那样，使用事件委托会解决它。

在未调整大小调整时单击事件

3 个答案: