形式的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); 
    }); 
});