jquery does not select jquery added element

Question

So I have a jquery function that does something when class \'ajaxsubnote\' is clicked

$(\'.ajaxsubnote\').click(function(){
     //do something....
})


        

Answer 1

You need to use the on() function to delegate the click event

$("dynamicContainerElement").on("click", "dynamicallyAddedElement", 
     function () 
     { 
        /* Your code here */
     });

http://api.jquery.com/on/

Answer 2

The difference between a bind/click event and a delegated on event is this very important.

When you use bind or a shortcut such as click, it binds the designated event to all elements matching the specific selector at that time. This selector is a snapshot in time and is not updated when new elements are added.

When you use event delegation you provide a static parent selector and then your dynamic element selector. Now when you click anywhere within the parent selector, jQuery checks to see if the target matches the parent selector. If the target matches the second selector then the event is triggered. This means that you can add and remove elements to the parent content section that match the criteria for the event triggering without having to bind events every time.

http://api.jquery.com/on/

So what you need is something like:

$(parentElement).on( "click", ".ajaxsubnode", function(){
     //do something....
});

Where the parentElement is as specific as possible while still being a parent of all possible ajaxsubnode classes.

Answer 3

You should use delegated event method to handle dynamic elements. See below,

// v--- replace document with closest parent container that exist in DOM
$(document).on('click', '.ajaxsubnote', function(){
     //do something....
})

For older versions use delegate,

// v--- replace document with closest parent container that exist in DOM
$(document).delegate('.ajaxsubnote', 'click', function(){
     //do something....
})