addClass в функции $ (window) .resize .on («щелчок» не работает

0

Посмотрите ссылку jsfiddle http://jsfiddle.net/3aRqA/

Если фон оранжевый, означает, что ul добавляет mobile-nav как имя класса, иначе фон будет желтым.

Теперь, если он оранжевый, и мы нажимаем на ссылку, он должен здесь предупредить, но ничего не произойдет.

Если я раскомментирую строку в $(document).ready(function.... она будет работать, также если я добавлю класс в раздел разметки.

Что я делаю не так? Я хочу, чтобы класс mobile-nav переключался в зависимости от размера экрана и, конечно, ul.nav.mobile-nav.... (' ul.nav.mobile-nav... ', чтобы работать, если у меня есть класс ul.nav.mobile-nav...

вот код, спасибо за помощь!

<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>
Теги:

2 ответа

2
Лучший ответ

Вы должны использовать событие-делегирование, поскольку класс элементов является динамическим.

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

DEMO

Поделиться
  • 2
    Я собирался написать то же самое, но я остановился, потому что preventDefault() не будет работать preventDefault() с делегированием события (слишком поздно, чтобы предотвратить поведение по умолчанию, так как событие уже всплыло в документе). Это может помешать спрашивающему использовать ваш код.
  • 0
    @ FrédéricHamidi Ах, но тогда мы могли бы использовать другое делегирование непосредственно на элементе с помощью preventDefault() или?
Показать ещё 3 комментария
2

Связывание событий связывается, когда документ готов, а не "живет".

Вы не могли бы связать щелчок на a независимо от того, что размер окна, но внутри обработчика событий, проверив класс:

$('ul.nav > li > a').on('click',function(e) {
        if($(this).closest('.mobile-nav').length){
            e.preventDefault();
            alert("here");
        }
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню