Question

I am loading some html via $.get() into a Jquery-dialog-popup.

Upon clicking a link in the newly inserted html some function should be triggered.

This works with live() but NOT with on().

This works:

$(".remove").live("click", function () {
  // enter ok
}

This does not:

$("div").on("click", ".remove", function () {
// or $("#delete").on("click", ".remove", function () {
// or $(".remove").on("click", function () {

      // never enters...
});  

html:

<div id="delete">
  <a class="remove" href="#">link</a>
</div>

The on()-function works in case I am calling it directly from my main-template without loading the content into a dialog-window first via $.get.

Answer 1

To pre-bind events for dynamic content, they have to be bound to a pre-existing element.

So, if the <div id="delete"> is part of the dynamic content, then you shouldn’t use it to bind the event. You can, however, bind to the container that the dynamic content is loaded into.

So, if the resulting HTML is:

<div id="contents">
  <!-- start template -->

  <div id="delete">
    <a class="remove" href="#">link</a>
  </div>

  <!-- end template -->
</div>

Then, your JavaScript can be:

$('#contents').on('click', 'div a.remove', function () {
  // ...
});

.live() uses document for this — an element that exists until reload or redirect — making the following lines equivalent:

$("a.remove").live("click", function () { /* ... */ });
$(document).on("click", "a.remove", function () { /* ... */ });