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;
 }
}

一切正常，除了当我使用 jQuery 将链接插入到按钮单击的 div 中时(使链接“可见”):

$("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(...)时发生的情况)可能会强制浏览器重新创建某些对象。新创建的对象可能没有绑定(bind)事件监听器。因此，您应该考虑对所有 change 事件使用 .live(...) 而不是 .bind(...)。有关详细信息，请参阅 .live 上的 jQuery 文档。