Question

请查看jsfiddle link http://jsfiddle.net/3aRqA/

如果背景为橙色表示ul已将mobile-nav添加为类名，则背景将为黄色。

现在，如果它是橙色，我们点击一个链接，它应该在这里提醒，但什么都不会发生。

如果我取消注释$(document).ready(function....中的行，它将起作用，如果我在标记部分添加该类。

我做错了什么？我希望课程mobile-nav能够根据屏幕大小进行切换，当然也可以根据屏幕大小进行切换。（如果我有课程ul.nav.mobile-nav...

，请单击＆＃39;

这是代码，谢谢你的帮助！

<span class="show-window-width"></span>

<ul class="nav">
    <li>
        <a href="#">One</a>
    </li>
    <li>
        <a href="#">Two</a>
    </li>
    <li>
        <a href="#">Three</a>
    </li>
    <li>
        <a href="#">Four</a>
    </li>
</ul>

<script type="text/javascript">
var d = {};
d.winW = $(window).width();


$( window ).resize(function() {
    d.winW = $(window).width();
    $('.show-window-width').html(d.winW);
    isMobileNav();
});

function isMobileNav() {
    if(d.winW<=400) {
        $('ul.nav').addClass('mobile-nav');
    } else {
        $('ul.nav').removeClass('mobile-nav');
    }
}


$(document).ready(function(){

    //$('ul.nav').addClass("mobile-nav");

    $('ul.nav.mobile-nav > li > a').on('click',function(e) {
            e.preventDefault();
            alert("here");
    });
});
</script>


<style>
ul.nav {
    background-color:yellow;
}
ul.nav.mobile-nav {
    background-color:orange;
}
</style>

Answer 1

您必须使用事件委派，因为元素类是动态的。

$(document).on('click','ul.nav.mobile-nav > li > a',function(e) {
        e.preventDefault();
        alert("here");
});

DEMO

Answer 2

文档准备好后，事件绑定就会绑定，而不是＆＃34; live＆＃34;。

无论窗口大小是什么，您都可以绑定a上的点击，但是在事件处理程序中，您可以检查类：

$('ul.nav > li > a').on('click',function(e) {
        if($(this).closest('.mobile-nav').length){
            e.preventDefault();
            alert("here");
        }
});

$（window）.resize函数中的addClass .on（'click'不工作

2 个答案: