Невозможно перейти от JQuery.live () к JQuery.on ()

Question

Я загружаю html через $ .get () во всплывающее окно Jquery-dialog.

При нажатии на ссылку во вновь вставленном html должна запускаться какая-то функция.

Этоработает с live (), но НЕ с on ().

Это работает:

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

Это не:

$("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>

Функция on () - работает, если я вызываю ее напрямую из основного шаблона, не загружая содержимое в диалоговое окно сначала через $ .get.

Answer 1

Чтобы предварительно связать события для динамического содержимого, они должны быть связаны с уже существующим элементом.

Таким образом, если <div id="delete"> является частью динамического содержимого, вы не должны использовать его для привязки события. Однако вы можете привязать контейнер, в который загружено динамическое содержимое.

Итак, если получится HTML:

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

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

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

Тогда ваш JavaScript может быть:

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

.live() использует для этого document - элемент, который существует до перезагрузки или перенаправления - что делает следующие строки эквивалентными:

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

Answer 2

Я не вижу весь код, но могу поспорить, что вы не ставите

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

      // never enters...
}

часть РАЗ, когда новый код вставлен в DOM.

Вынеобходимо прикрепить слушатели событий к новым созданным элементам.Live работает, потому что он работает для существующих и будущих элементов, подобных этому.

EDIT:

Если вы хотите, чтобы обработчик щелчка работал для элемента, который загружается динамически, тогдавам нужно установить обработчик событий для родительского объекта (который не загружается динамически) и назначить ему селектор, соответствующий вашему динамическому объекту, например:

$('#parent').on("click", ".remove", function() {});