希望得到大家的一点帮助。
当检测到表单是否更改时,我使用此脚本。如果是这样,在我单击具有特定类的 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
#my_form .editable
替代#my_form input[type=text].editable, #my_form textarea.editable
,并将绑定事件从keyup
或paste
改为change
来进行优化。这样可以减少代码量并实现相同的效果。 - Miguel Ventura