jQuery检测表单变化

Question

希望得到大家的一点帮助。

当检测到表单是否更改时，我使用此脚本。如果是这样，在我单击具有特定类的 a 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

- Keat

Answer 1

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

- Miguel Ventura

---

嘿！太棒了，完美地解决了问题。非常感谢。我会继续了解.live。顺便问一下，这是检查表单是否更改的好方法吗？这样我就可以在离开页面之前得到确认窗口了。我在网上找到了这个脚本，但我对js / jQuery还是个初学者。 - Keat

@Andreas：这已经足够好了。你可以通过使用 #my_form .editable 替代 #my_form input[type=text].editable, #my_form textarea.editable，并将绑定事件从 keyup 或 paste 改为 change 来进行优化。这样可以减少代码量并实现相同的效果。 - Miguel Ventura

Answer 2

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

- Steerpike

Answer 3

其他答案已经提到了，但是明确地说，这里是需要做的事情。

将此更改为：

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

转换为：

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

- Agent_9191