在Jquery中更改按鈕屬性的奇怪行為
[英]Strange Behaviour on changing the property of button in Jquery
問題描述
我在單擊處理程序上禁用了一個按鈕，很奇怪，一旦禁用該按鈕，之后就不會提交。 它因瀏覽器而異。 Firefox允許在禁用提交按鈕后提交表單，但chrome和IE正在阻止它
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script>
$(function(){
$("#btn").on("click",function(){
$(this).prop('disabled','true');
alert('clicked');
});
$("#frm").on("submit",function(){
alert("submit1");
});
$("#frm").on("submit",function(){
alert("submit2");
});
})
</script>
</head>
<body>
<form id="frm" action="#">
<input type='submit' id="btn"/>
</form>
</body>
這是一種奇怪的行為，在禁用buttton時會阻止提交。 可能是什么原因。 我在Chrome和IE中獲得的輸出是點擊執行然后腳本關閉
為什么不執行點擊然后執行提交
2 個解決方案
解決方案1
2 2013-11-27 09:56:50
我想你是說當你點擊它時禁用提交按鈕時，表單不會被提交而你想要它。
我認為其原因是click事件發生在按鈕的激活行為之前 （這是HTML5規范的“它做什么”的術語）。 當然，啟用（“規范”的“可變”）提交按鈕的激活行為是觸發表單提交。 但是，當瀏覽器決定激活行為時（即觸發click處理程序之后） ，您已禁用該按鈕。 根據該規范 ，禁用（“不可變”，因為他們把它）提交按鈕沒有激活行為，所以形式不是提交。
因此問題變成：瀏覽器何時決定使用哪種激活行為，在click處理程序之前或之后？ 對於答案，我們轉向DOM事件規范，它告訴我們首先發生click ， 然后發生激活行為 。 因此， click事件完成后Chrome似乎正在決定，這是對規范的合理讀取; 在click事件完成之前 ，Firefox似乎正在決定。
但實際上，現實情況是，如果您在click處理程序中禁用該按鈕，則無法保證獲得表單提交。 要解決此問題，您可以非常簡單地延遲禁用按鈕，以便在沒有禁用按鈕的情況下完成事件：
$("#btn").on("click",function(){
var btn = this;
setTimeout(function() {
btn.disabled = true;
}, 0);
alert('clicked');
});
旁注：在上面，我也（有效地）替換了$(this).prop("disabled", true"); with（有效） this.disabled = true;沒有理由將元素包裝成一個jQuery包裝器只是為了設置一個簡單的屬性值。
解決方案2
1 2013-11-27 10:01:43
應該解決你的問題：
$("#btn").on("click", function (e) {
e.preventDefault();
$(this).prop('disabled', true).closest('form').submit();
//to submit FORM without firing jquery's attached handlers
//$(this).prop('disabled', true).closest('form').get(0).submit();
alert('clicked');
});
jQuery UI對話框未居中，關閉按鈕行為異常
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.