jQuery обнаруживает изменения формы

Question

Надеюсь получить небольшую помощь от вас, ребята.

Я использую этот скрипт при обнаружении изменения формы или нет. Если это так, когда я нажимаю ссылку href с определенным классом, появляется окно подтверждения.

var formChanged = false;

$(document).ready(function() {

$('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i) {
  $(this).data('initial_value', $(this).val());
});

$('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() {
  if ($(this).val() != $(this).data('initial_value')) {
       handleFormChanged();
}
});

$('#my_form .editable').bind('change paste', function() {
  handleFormChanged();
});

$('.navigation_link').bind("click", function () {
  return confirmNavigation();
});
});

function handleFormChanged() {
 $('#save_or_update').removeAttr('disabled');
 formChanged = true;
}

function confirmNavigation() {
 if (formChanged) {
      return confirm('Are you sure? Your changes will be lost!');
 } else {
      return true;
 }
}

Все работает нормально, за исключением случаев, когда у меня есть ссылка, вставленная в div, по нажатию кнопки с помощью jQuery следующим образом (делая ссылку "видимой"):

$("button").click(function () {
  var dylink = "<a href='#' class='navigation_link'>dynammic link</a>";
  $("#tester").html(dylink);
});

окно подтверждения не появляется, если я редактирую форму и затем нажимаю «динамическую ссылку». Другая ссылка работает отлично. Есть идеи, что бы это могло быть?

Это HTML-код

<div><button>Show link</button></div>
<div id="tester"></div>
<div><a href="#" class="navigation_link">permanent link</a></div>
<form action="" method="get" id="my_form">
<input type="text" class="editable">
 <input type="button" name="button" id="save_or_update" value="Submit" disabled="disabled" />
</form>

Спасибо / A

Answer 1

Изменение объекта innerHTML (что происходит при использовании .html(...)) может заставить браузер воссоздать некоторые объекты. Вновь созданные объекты могут не иметь связанных слушателей событий. Поэтому вам следует рассмотреть возможность использования .live(...) вместо .bind(...) для всех событий change . См. Документацию jQuery на .live для получения дополнительной информации.

Answer 2

Другие ответы намекали на это, но явно, вот что нужно сделать.

Изменить это:

$('.navigation_link').bind("click", function () {
  return confirmNavigation();
});
});

к этому:

$('.navigation_link').live("click", function () {
  return confirmNavigation();
});
});

Answer 3

$("button").live("click",function () {
  var dylink = "<a href='#' class='navigation_link'>dynammic link</a>";
  $("#tester").html(dylink);
});