我有一个使用backbone.js 和jQuery 作为UI 的应用程序。我在页面上有一个表单,附加到表单的文本框模糊事件是一个函数,它在某些条件下向用户显示一个弹出窗口并等待它的输入 - 使用对 WCF 服务的 ajax 调用检查条件。
一切正常,直到我在文本字段上设置焦点时单击表单的提交按钮 - 然后显示弹出窗口,但在其后面提交表单。
当然,正确的结果是取消第二个事件(如果显示弹出窗口,则肯定无法提交表单)
我怎样才能做到这一点?
我有一个使用backbone.js 和jQuery 作为UI 的应用程序。我在页面上有一个表单,附加到表单的文本框模糊事件是一个函数,它在某些条件下向用户显示一个弹出窗口并等待它的输入 - 使用对 WCF 服务的 ajax 调用检查条件。
一切正常,直到我在文本字段上设置焦点时单击表单的提交按钮 - 然后显示弹出窗口,但在其后面提交表单。
当然,正确的结果是取消第二个事件(如果显示弹出窗口,则肯定无法提交表单)
我怎样才能做到这一点?
您是说单击“提交”导致弹出窗口显示 - 这不是应该显示的“某些条件”之一?我会考虑向模糊处理程序添加一个条件,以检查是否单击了提交按钮。在这种情况下不要显示弹出窗口。
在 onSubmit 处理程序中取消事件 -
form.addEventListener("submit", function(evt){
evt.cancel()
//dont want to catch it again
form.removeEventListener(this)
popup.show()
//have the popup call submit when done, it wont be caught again
}
如果弹出窗口可见,您可以绑定到的提交事件<form>
并调用其preventDefault()方法来禁止提交:
$("form").submit(function(e) {
if ($("selector_matching_your_popup").is(":visible")) {
e.preventDefault(); // Cancel submission.
}
});
您也可以false
从处理程序返回而不是调用preventDefault()
,但这也会停止将submit
事件传播到祖先元素,这可能是您不希望的。