Question

I’ve been doing this to create a handler every time an element is created (rh differs each time, of course):

$('#'+rh).on('click', function (e) {...

I wanted to try to create just one handler for the class rh which will apply to all subsequently created elements in that class. I’ve tried this, but it hasn’t worked:

$('.rh').on('click', function (e) {...

What am I doing wrong? I thought on had a retrospective effect (and the api.jQuery.com site is down).

Answer 1

You should go for a event delegation. As you’re creating them dynamically, so you need event delegation (aka, live event) on them.

$('#container').on('click', '.rh', function (e) {...

here #container is the parent of created elements which belongs on DOM at page load. You may have something else.

Read more about .on()

There is another option called .delegate()

$('#container').delegate('.rh', 'click', function (e) {...

I’d go for .on().