Search code examples
jqueryfunctiondelegateslive

Unable to get jQuery on() to register dynamically added content

I'm quite new to the on() method in jQuery but the time has come for me to need to use it.

I've two functions for clicking on specific buttons. Each function works on any elements originally on the page but not on any dynamically added content (more of the same buttons). I understand I need to use the on() function after reading other answers on here and on Google but am having trouble still. Anyway, code:

jQuery("ul#THEBUTTONS").on({
    click: function(event){
        event.preventDefault();
        console.log("apaz clicked");
    }
}, "a.azaz");


jQuery("ul#THEBUTTONS").on({
    click: function(event){
        event.preventDefault();
        console.log("mapaz clicked");
    }
}, "a.mapaz");

Any help would be immensely appreciated, tearing my hair out here.

Solution

  • .on() essentially has two flavors: one which acts like .bind(), and another which acts like .delegate().

    For your problem, you want to use the delegate version. As a reference, on signatures are like this:

    // bind
$(element-selector).on(event, handler)

// delegate
$(container-selector).on(event, element-selector, handler)

    The best way to get up to speed with this is probably to read up on delegate, what it is, how its used, and then apply that to on.