Question

I’ve found out that when I use jQuery to add something to a page (via .append ) then the class actions I’ve set don’t seem to apply to the new elements.
For example in my $(document).ready function I’ll add a $(".clickable").click(doSomething) it works for anything that’s on the page before it’s called, but if I append something with a clickable class, then the new element won’t be clickable even if it has a clickable class.

While I was posting I tried and realized that I could get around this by recalling the $(".clickable").click(doSomething); after adding the elament, but that just makes it call doSomething more times for every element I add.
In other words if I added 5 elements when I click on a clickable class doSomething would be called 5 times in a row for 1 click.

I’m wondering if there is a more elegant solution so I don’t have to recall any jQuery actions everytime I add an elament, perhaps there’s a smarter method than append?

Answer 1

Indeed there’s a much better solution. Use the on method to attach an event handler for current and future elements having the class clickable.

$('body').on('click', '.clickable', function() {
    ..
});