javascript - How to handle updating the navigation bar while using ajax -

i have ajax implementation on wordpress install , i'm using 'css , javascript toolbox' plugin apply additional javascript code. have tried following code in header.php file in both section , .

i'm using standard 'twenty fourteen' theme , i'm referencing primary navigation bar @ top. there no subpages, normal links.

http://twentyfourteendemo.wordpress.com/

the code i'm using, i'm sure problem, this

<script> jquery('ul.menu li').click(function(){    // remove class on each item   jquery('ul.menu li').removeclass('current-menu-item current_page_item');  // add class 1     jquery(this).addclass('current_page_item current-menu-item');  }) </script> 

i have tried this

<script> jquery('ul.menu li').each(function() { jquery(this).removeclass('current-menu-item'); jquery(this).removeclass('current_page_item'); }); jquery(this).parents('li').addclass('current_page_item'); jquery(this).parents('li').addclass('current-menu-item'); </script> 

i don't know javascript isn't doing anything. when link clicked, 'highlighted' page on navigation bar stays on original page.

i have other code, toggles navigation bar on , off when link clicked (on mobile) , works fine code registering, not working.

does know why code isn't working? i've been stuck problem days , can't launch without being fixed, i'd throw beer money solution

i cannot see sample code in website, see if code in body or head etc, couple of things can try:

1 - have not wrapped code in document ready event.

that means may running code against dom elements before exist, code nothing.

this shortcut version of jquery(document).ready() provides locally scoped $ variable can shorten jquery code:

<script> jquery(function($){     $('ul.menu li').click(function(){            // remove class on each item           $('ul.menu li').removeclass('current-menu-item current_page_item');         // add class 1             $(this).addclass('current_page_item current-menu-item');      }) }); </script> 

2 - if menu items added/classed-up after load (e.g. plugin), need use delegated event handlers:

e.g.

<script> jquery(function($){     $(document).on('click', 'ul.menu li', function(){            // remove class on each item           $('ul.menu li').removeclass('current-menu-item current_page_item');         // add class 1             $(this).addclass('current_page_item current-menu-item');      }) }); </script> 

this works listening event bubbling non-changing ancestor element, then applying jquery element selector, then applying function selected elements that caused event.

notes: fallback element delegated events should document , not 'body' 'body' has bugs (related styling) can cause events not trigger. should target nearest non-changing ancestor efficient.

note: second option generally best way code event handlers e group of controls, adds single handler dom.

update:

as predicted, js code in header, needed wrapping in document ready event handler.

also, actual website uses menu this: <ul id="menu-pages" class="nav-menu"> selector menu items should ul.nav-menu li or #menu-pages li , not ul.menu li.

e.g

<script> jquery(function($){     $(document).on('click', 'ul.nav-menu li', function(){            // remove class on each item           $('ul.nav-menu li').removeclass('current-menu-item current_page_item');         // add class 1             $(this).addclass('current_page_item current-menu-item');      }) }); </script>