jQuery 检测表单变化答案

【问题标题】：jQuery detect form changesjQuery 检测表单变化
【发布时间】：2009-11-18 17:32:17
【问题描述】：

希望能得到大家的帮助。

我在检测表单是否已更改时使用此脚本。如果是这样，当我单击某个类的 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

【问题讨论】：

标签： jquery forms

【解决方案1】：

更改对象的 innerHTML（当您使用 .html(...) 时会发生这种情况）可能会迫使浏览器重新创建某些对象。新创建的对象可能没有绑定您的事件侦听器。因此，您应该考虑对所有 change 事件使用.live(...) 而不是.bind(...)。有关更多信息，请参阅 .live 上的 jQuery 文档。

【讨论】：

嘿！那工作得很好。非常感谢。将阅读有关 .live 的更多信息。顺便提一句。这是检查表单是否已更改的好方法，以便我可以在离开页面之前获得确认窗口吗？我在网上找到了这个脚本，我是 js/jQuery 的初学者。
@Andreas：已经足够好了。您可以通过仅使用 #my_form .editable 而不是 #my_form input[type=text].editable, #my_form textarea.editable 来优化它，而不是绑定到 keyup 或 paste 绑定到 change。您将获得更少（更简单）的代码并达到相同的效果。

【解决方案2】：

其他答案暗示了这一点，但明确地说，这是要做什么。

改变这个：

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

到这里：

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

【讨论】：

【解决方案3】：

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

【讨论】：