You are using the correct syntax for binding to the document to listen for a click event for an element with id=”test-element”.
It’s probably not working due to one of:
- Not using recent version of jQuery
- Not wrapping your code inside of DOM ready
- or you are doing something which causes the event not to bubble up to the listener on the document.
To capture events on elements which are created AFTER declaring your event listeners – you should bind to a parent element, or element higher in the hierarchy.
For example:
$(document).ready(function() {
// This WILL work because we are listening on the 'document',
// for a click on an element with an ID of #test-element
$(document).on("click","#test-element",function() {
alert("click bound to document listening for #test-element");
});
// This will NOT work because there is no '#test-element' ... yet
$("#test-element").on("click",function() {
alert("click bound directly to #test-element");
});
// Create the dynamic element '#test-element'
$('body').append('<div id="test-element">Click mee</div>');
});
In this example, only the “bound to document” alert will fire.