阻止IE表單提交jQuery委託「提交」操作

我試圖使用jQuery的.delegate（）函數來捕獲提交按鈕按下並阻止頁面被重新加載。阻止IE表單提交jQuery委託「提交」操作

它可以在我嘗試過的每個瀏覽器中都正常工作，但是可以使用Internet Explorer！！

讓我的代碼解釋，我有這樣的HTML是通過JS動態生成：

<form id='submit-form'> 
    <input type='text' id='blah' /> 
    <input type='submit' id='blahbutton' /> 
</form>

我的JavaScript看起來像這樣：

$("body").delegate("#submit-form", "submit", function(event) 
{ 
    // to logic here 
    return false; 
});

當在文本框中輸入並使用'Enter'鍵盤按鈕，它執行JS罰款和頁面保持原樣。但是當用鼠標點擊提交按鈕時，它會重新加載頁面並提交表單。

我該如何做到這一點，因此點擊按鈕的操作與按下Internet Explorer上的輸入按鈕相同？

來源

2010-10-01 Stephen RC

如果不使用'.delegate（）'，會發生什麼？老實說，你有一個獨特的，一次性的表格，你可能不需要使用事件代表團。 – jason 2010-10-01 01:24:10

不，它是由JS生成的，因爲新的表單是在用戶輸入上創建的。根據用戶的不同，可以在1到100之間創建這些內容。 – 2010-10-02 21:57:30

我想通了。

我的解決方案是爲創建動作表單提交和提交按鈕單擊。

所以：

按「確認」鍵，在輸入框中觸發表單提交動作
點擊「提交」按鈕，觸發按鈕單擊操作

這並不意味着代碼重複，但它現在在IE和其他工作。

來源

2010-10-02 22:03:03

你救了我的一天，先生！ – glebm 2011-09-14 14:06:17

這個錯誤在jQuery 1.6.4中得到解決（http://bugs.jquery.com/ticket/10208）！ – glebm 2011-09-14 14:15:09

您是否知道可以進一步避免代碼重複？。'$（ '形式'）提交（handlerFn）; $（ 'input.submit'）點擊（handlerFn）。函數handlerFn（）{/ * do stuff * /'。將你的處理程序分成一個命名函數，然後你可以將這個函數對象傳遞給這兩個處理程序。 – jmort253 2012-06-01 17:07:11

試試這個，

<form id='submit-form' onSubmit='return false;'>

來源

2010-10-01 00:22:36

是的，這將阻止表單提交。這裏有一個小問題，這裏有點邏輯...... – 2010-10-01 00:23:18

防止JS執行...... – 2010-10-01 01:07:21

如果你使用jQuery，你應該將你的行爲與HTML結構分開。在文檔就緒功能中添加一個監聽器綁定，而不是在表單中使用onSubmit。 – Aaron 2010-10-01 01:24:44

朗在這裏拍攝的，但你有沒有與任何一個的submit-form或blahbuttonid或name屬性，該屬性頁什麼別的嗎？或全局變量（例如，window屬性）？因爲IE有命名空間問題（它爲conflates things it shouldn't），並且不止一次，我發現通過發現具有相同值的name某處存在某種東西，解決了這類古怪問題。

一個簡單的方法來檢查是暫時給窗體和按鈕全新的ID（如flibbergibbet23和ohmygodunicorns451），看看問題是否消失。如果是這樣，那麼你知道這是一個奇怪的IE名稱衝突，你可以去尋找和摧毀任務...

來源

2010-10-01 00:27:06

好的建議:)但是ID的都非常獨特。（我已經使用友好的例子） – 2010-10-01 00:56:44

@Valorin：只是要加倍確定你瞭解我，但不幸的是，IE瀏覽器會混淆'id'和'name'值（它們混合在一起）*和*屬性在'window'對象上。所以它不只是'id's ... – 2010-10-01 08:38:21

我在同一時間設置元素的名稱和id屬性。問題在於IE在觸發JS動作之前觸發表單動作，所以JS永遠不會運行。（因爲我使用.delegate（）） – 2010-10-02 21:58:34

不要event.preventDefault()和event.stopPropagation()爲你工作？

或者以下應該工作以及：

function myFunction() 
    { 
     if(...) 
     { 
      return true; 
     } 
     return false; 
    }

對於

<form id="formId" action="#" onsubmit="return(myFunction())"> 
... 
    <input type="submit" value="submit" /> 
</form>

來源

2010-10-01 00:51:49

不，他們不工作。感謝您的建議雖然:) – 2010-10-01 01:06:22

順便說一句，我只是試過你的代碼，它似乎在IE中工作正常 - http://jsbin.com/esezu3 – 2010-10-01 01:17:49

它不適用於我的IE安裝，所以也許還有別的東西繼續。 – 2010-10-02 21:59:55

一個可以考慮的是使用按鈕，而不是提交作爲類型屬性。

<button type="submit"></button>

相同

<input type="submit"></button>

但是如果你使用

<button type="button"></button>

或

<input type="button"></button>

然後使用類似：

$(function() { 
    $("#buttonId").bind("click", function() { 

     // ...do stuff 

     //if all conditions are met 

     $("formId").trigger("submit"); 
    }); 
});

然後，它不會提交表單作爲其默認的行爲，您可以根據需要附加一個點擊收聽，等它，並具有監聽器函數提交表單，而不是隻要你指定的任何條件（如果有的話）。

這樣你就不必使用我認爲的東西了，有點黑客可以取消（使用e.preventDefault（），返回false，無論什麼......）表單提交操作沒有首先必須解僱。取消默認行爲有時會導致怪異和難以追查的副作用...所以爲什麼不避免首先做（如果你能夠，當然）？

來源

2010-10-01 01:14:37 Aaron

按鈕不會在輸入窗體中按下'enter'按鈕時觸發。 – 2010-10-02 22:00:29

+1 - 我使用這種技術，可能會再次使用它。您只需將一個按鍵事件綁定到輸入字段，以便輸入按鍵調用按鈕的點擊處理程序。好處是你可以通過編寫單擊處理程序代碼並省略提交處理程序來避免代碼重複。 – jmort253 2012-06-01 16:58:29

阻止IE表單提交jQuery委託「提交」操作

回答

相關問題