形式的preventDefault不工作

Question

我有提交一個隱藏的表單按鈕：

<a href = "javascript:;" onclick = "document.getElementById('work-for-form').submit();"> 

形式：

<form id="work-for-form" action="localhost/update" method="PUT" style="display: none;"> 
{{ csrf_field() }} 
</form> 

而我的JS：

$("#work-for-form").submit(function(event){ 
    event.preventDefault(); 
    console.log(event); 
}); 

但形式仍然加載新一頁。

我在做什麼錯了？ 謝謝

Answer 1

您a上的onclick事件太強大，無法阻止提交表單。我建議如下解決這個問題：

<a href="javascript:;" >form submit</a> 

<form id="work-for-form" action="/update" method="PUT" style="display: none;">{{ csrf_field() }}</form> 

<script> 
$("a").on("click",function(){ 
    $("#work-for-form").submit(); 
}) 
$("#work-for-form").submit(function(event){ 
    alert('intercept'); 
    event.preventDefault(); 
    console.log(event); 
}); 
</script> 

又見https://jsfiddle.net/9hta6f48/

Answer 2

您可以使用return false或者你可以使用eventListeners

<form onsubmit="alert('stop submit'); return false;" > 

或者

function mySubmit(){ 
     alert('Will not submit'); 
     return false; 
    } 
</script> 

<form onsubmit="return mySubmit();" > 

或事件聽衆

var myFuncRef = function() { event.preventDefault() } 

element.attachEvent('onclick', myFuncRef); 

Answer 3

你的代碼必須在$（文件）。就緒或者必須是形式呈現後，

$(document).ready(function(){ 
    $("#work-for-form").submit(function(event){ 
    event.preventDefault(); 
    console.log(event); 
    }); 
});