Menu
How would I use .on() if the HTML is not generated yet? The jQuery page says
If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.
But I'm not really sure how to do that. Is there a way to "reload" the event handler?
So if I had
$(document).ready(function(){
$('.test').on('click', function(){
var id = $(this).attr('id');
console.log("clicked" + id);
});
generatePage();
});
where generatePage() creates a bunch of divs with .test, how would I rebind .on()?
I'm aware similar questions have been asked, but I didn't find what I was looking for after a quick search.
396
If you try to bind the elements that are dynamically added to the DOM using the click() method of jQuery, this will not work, because it only binds the click event to elements that exist at the time of the “binding”. To bind the click event to all existing and future elements, use jQuery's on() method.
Commonly Used jQuery Event Methods The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element.
To attach event handlers to the dynamically created button, we need to select the button with a class of btn and add an event listener of click . We're saying that onclick of the button, the p tag with a class of moreInfo should display block .
Use .on like in the example below. One can presume that the body-tag is always available so it's safe to attach the event handler to body and delegate the events to the selector, in this case .test.
$(document).ready(function(){
$('body').on('click', '.test', function(){ // Make your changes here
var id = $(this).attr('id');
console.log("clicked" + id);
});
generatePage();
});
Or if generatePage() is also generating the html, head and body tags use document as your selector.
$(document).ready(function(){
$(document).on('click', '.test', function(){ // Make your changes here
var id = $(this).attr('id');
console.log("clicked" + id);
});
generatePage();
});
According to the jquery documentation .on accepts the following parameters:
.on( events [, selector] [, data], handler(eventObject) )
Including selector is described as follows:
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
