Question

Suppose I have the following HTML and js

<div>
  <div class="testdiv" id="test1">test</div>
  <div class="testdiv" id="test2">test</div>
</div>

function DynamicEvents() {

  $('.testdiv').click (function () {
     DoSomething();
  });
}

function RedrawHTML() {

  $('#test1').html('new HTML');
  DynamicEvents();
}

Everytime I’m calling RedrawHTML, I’m also calling DynamicEvents to rebind test1. Suppose I’m calling RedrawHTML several times to update the div. My question is this: when I click on test2, does the function DoSomething() get executed once or get executed as many times as I’ve called RedrawHTML()?

Answer 1

In order to properly use .on you need to bind the event(s) to a parent element that is currently present in the DOM. So if i were you i would give the parent div an id and bind the event to that. Here’s an example

For your html

<div id="container">
  <div class="testdiv" id="test1">test</div>
  <div class="testdiv" id="test2">test</div>
</div>

In the JS

$('#container').on('click', '.testdiv', DoSomething); 

If there’s no parent element guaranteed to be in the DOM the time the event is bound, then you could in the worst case bind to the body or document but i do not recommend this approach.

$("body").on('click', '.testdiv', DoSomething); 

$(document).on('click', '.testdiv', DoSomething); 

If you’re not using jQuery 1.7, the equivalent delegate code would be

 $('#container').delegate('click', '.testdiv', DoSomething); 

You only need to do this once, all click events triggered by .testdiv will bubble up to the #container and DoSomething() will be executed.