Question

Having some problems getting my .on() working. My site is here.

If you take a look at http://www.eliteweb-creation.co.uk/dev/js/nav.js, I am setting up some on mouseenter & mouseleave event handlers on $('a.left.active')

For the sake of anyone viewing this post in the future, I have added the code to jsfiddle:

http://jsfiddle.net/TcbAP/

The anchors have .active added to them dynamically when clicked on, hence using .on() instead of .click() so that the jQuery detects the dom changes and adds the event handler.

My .on("click") for the anchors before adding the .active class are working fine, the issue seems to be for .on() not detecting the class change.

Any and all help is appreciated.

Answer 1

Using .on() does not magically make your code detect changes.

You have to delegate the click event handler from an ancestor element that doesn’t change:

$('.nav').on('click', 'a.active', function(e) {
    // Put your code here...        
});

You can read more about it in the jQuery docs: Direct and delegated events