This jquery code not working as I Want in show and close menu

Question

$(".fa-bars").click(function () {
    $(".header-nav div > ul").css("display","block");
    $(this).removeClass("fa-bars");
    $(this).addClass("fa-times");
});

$(".fa-times").click(function () {
    $(".header-nav div > ul").css("display","none");
    $(this).removeClass("fa-times");
    $(this).addClass("fa-bars");
});

this is the html code:

<nav class="header-nav">
        <i class="mobile-menu fa fa-bars" aria-hidden="true"></i>
        <?php wp_nav_menu([
            'theme_location' => 'HeaderMenu'
        ]); ?>
</nav>

In the above code, when I click on "fa-bars" menu displays as I want to do when I click on "fa-time" , menu not close.

sorry for my English.

You bind your click event before the element has the class `.fa-times`. Use [event delegation](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Turnip, Nov 01 '19 at 12:19

Shubham Baranwal · Accepted Answer · 2019-11-01T12:50:14.130

2

You need to bind your click using event delegation.

Try below code -

$(".header-nav").on('click', '.fa-bars', function () {
    $(".header-nav div > ul").css("display","block");
    $(this).addClass("fa-times").removeClass("fa-bars");
});


$(".header-nav").on('click', '.fa-times', function () {
    $(".header-nav div > ul").css("display","none");
    $(this).addClass("fa-bars").removeClass("fa-times");
});

edited Nov 01 '19 at 12:50

answered Nov 01 '19 at 12:32

Shubham Baranwal

2,492
3
14
26

Could you make a fiddle of your code that you tried? – Shubham Baranwal Nov 01 '19 at 12:42
You should be binding the events to an ancestor element, not `document`. Example: https://jsfiddle.net/hs1domua/1/ – Turnip Nov 01 '19 at 12:48

This jquery code not working as I Want in show and close menu

1 Answers1