Question

/* ========== Expand Left Menu ========== */
    $('div.minimized').click(function() {
        $(this).removeClass("minimized");
        $(this).addClass("expanded");
        $('a.main_nav').removeClass("min");
        $('a.main_nav').addClass("exp");
        $('#left_menu_ul li a').animate({"margin-left" : "-20px"}, 400, 'easeOutExpo');
        $('#expand_wrapper').animate({"width" : "270px"}, 400, 'easeOutExpo');
        $('#expand').animate({"left" : "227px"}, 400, 'easeOutExpo');
        $('#left_menu').animate({"width" : "270px"}, 400, 'easeOutExpo');
    });

    /* ========== Minimize Left Menu ========== */      
    $('div.expanded').click(function() {            
        $(this).removeClass("expanded");
        $(this).addClass("minimized");
        $('a.main_nav').removeClass("exp");
        $('a.main_nav').addClass("min");
        $('#expand_wrapper').removeAttr('style');
        $('#left_menu_ul li a').animate({"margin-left" : "-223px"}, 800, 'easeInExpo');
        $('#expand_wrapper').animate({"width" : "67px"}, 800, 'easeInExpo');
        $('#expand').animate({"left" : "26px"}, 800, 'easeInExpo');
        $('#left_menu').animate({"width" : "67px"}, 800, 'easeInExpo');
    });

I am new to jQuery and I have a problem that I am unable to solve:
I want to expand a vertical menu. The code that expands the menu works fine, but after the menu is expanded (the classes change), jQuery is unable to select $('div.expanded').
Can anyone help me?

Answer 1

Your problem is that you are using the old way of attaching event handlers, which relies on the element existing when the handler is set up. Change your .click() to .on(‘click’) and it will fix the problem.

jQuery on