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(...)。有关详细信息，请参阅.live上的jQuery文档。

Answer 2

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

Answer 3

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

改变这个：

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

到此：

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

jQuery检测表单更改

3 个答案: