Question

I hope I’m making the question clear.

Say you have some check-boxes (or any other type of element for that matter) for which you register events handler when the page loads. Then you add some more check-boxes using AJAX (so no page reload). But you also want these newly added check-boxes (after the page was loaded) to have the same registered events handlers?

What I tried was this but I feel there has to be a better approach:

$(document).ready(function () {

  // Register custom envets handler
  registerCustomEventHandlers();

  $('a').on('click', addExtraFields);
});

function registerCustomEventHandlers() {
  $('input.class_name').on("change", sayHelloWorld);
}

function sayHelloWorld() {
  alert('Hello world');
}

function addExtraFields() {
  // insert some checkboxes...

  // register the events handler again for the newly added fields
  registerCustomEventHandlers();
}

So basically inside the function that adds the check-boxes I register again all the events handlers. I was looking at something like this $(document).change(function() {}); but apperently it is not supported by all browsers…

Any suggestions?

Answer 1

You can delegate the event to the document instead so that they will be applied to all future inputs as well. You don’t even need to put it in a domReady event, since the document is always available:

$(document).on("change", "input.class_name", sayHelloWorld);

function sayHelloWorld() {
    alert('Hello world');
}

function addExtraFields() {
    // insert some checkboxes, they will have the same handler attached when inserted
}

Demo: http://jsfiddle.net/gdX3R/1/