Registering an existing event handler with an object created via Jquery

Question

Ok, so I've got several objects which are basically the same with the exception of the text displayed on them. When they are clicked, perform an an action with an existing event handler

<div id="container">
  <div class="myclass">...<p>foo</p>...</div>
  <div class="myclass">...<p>bar</p>...</div>
  <div class="myclass">...<p>foo</p>...</div>
  ...etc etc
<div>
<div id="button" class="button">button-to-do-something</div>


$('.myclass').on('click', function () {
  ('this').css("background-color","red");
  //Some other junk happens here, but the red background is easily observed
});

$('#button').on('click', function() {
  $('#container').append('<div class="myclass">...<p>bar</p>...</div>');
});

I've set up a button that inserts another instance of the myclass div inside of the container div, however, when the dynamically created objects are clicked, they do nothing. The code, with the exception of the internal text (foo or bar in this instance) is exactly the same when observed with my browsers "inspect element". The event handler works for elements that are loaded with the page, but nothing happens for dynamically created objects.

Can I register the existing event handler for the dynamically inserted objects, or do I have to do something completely different?

Btw consider a template (e.g. Handlebars). HTML code hard coded inside JavaScript code is not a good approach. — Šime Vidas, Jun 05 '13 at 21:35

score 3 · Answer 1 · answered Jun 05 '13 at 21:33

You need to delegate it like so:

$('#container').on('click','.myclass', function () {
  ('this').css("background-color","red");
  //Some other junk happens here, but the red background is easily observed
});

or

$(document).on('click','.myclass', function () {
  ('this').css("background-color","red");
  //Some other junk happens here, but the red background is easily observed
});

Sushanth -- · Accepted Answer · 2013-06-05T21:41:20.790

2

Delegate the event

$(staticContainer).on('click', '.myClass' function () {

staticContainer is any container that is present in the DOM when the event is bound.

Closest staticContainer in your case might be '#container'

The closer it is to the element the better

edited Jun 05 '13 at 21:41

answered Jun 05 '13 at 21:34

Sushanth --

55,259
9
66
105

+1 for using `staticContainer` rather than `document`. – Dom Jun 05 '13 at 21:37
2

Guarantee you the OP asks why `staticContainer` is `undefined`. – Gabe Jun 05 '13 at 21:39
1

Nahh, got why it would have been undefined if I used it. Thanks for the answer though. =) – Sidney Jun 05 '13 at 21:49

Registering an existing event handler with an object created via Jquery

2 Answers2