Javascript Input type="submit" Button onClick: jQuery replaceWith 阻止表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13593731/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input type="submit" Button onClick: jQuery replaceWith prevents form from submitting
提问by LOLapalooza
I have the following HTML:
我有以下 HTML：
<input class="button" name="save" onclick="$(this).replaceWith('<img src=http://www.example.com/images/ajax-loader.gif />');" type="submit" value="SUBMIT">
When clicking on the button, the form no longer attempts to submit, but replaces itself with a turning AJAX loading gif and does nothing. If I remove the onclick portion, it submits.
单击按钮时，表单不再尝试提交，而是将自身替换为一个旋转的 AJAX 加载 gif 并且什么也不做。如果我删除 onclick 部分，它会提交。
Long story, this is for a client, but I can't give them the same thing in the form of
长话短说，这是给客户的，但我不能以以下形式给他们同样的东西
$(function() { $(input[name=save]).on({click:function() { $(this).replaceWith(...); } }); });
Why won't this still submit after replacing itself? I'm not e.preventDefault()'ing anywhere.
为什么这个在替换自己后仍然不会提交？我哪儿也不去e.preventDefault()。
回答by Nope
According to the replaceWith()documentation:
根据replaceWith()文档：
The .replaceWith() method removescontent from the DOM and inserts new content in its place with a single call.
.replaceWith() 方法从 DOM 中删除内容并通过一次调用在其位置插入新内容。
When an element is removed, as per remove()documentation:
当一个元素被删除时，根据remove()文档：
In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.
除了元素本身之外，所有与元素关联的绑定事件和 jQuery 数据都将被删除。
I'm assuming that is why the submit is not executing.
我假设这就是提交未执行的原因。
If you want the form to still submit you can manually trigger the submit after you have replaced the element.
如果您希望表单仍然提交，您可以在替换元素后手动触发提交。
DEMO- Submitting the form while replacing the button element
DEMO- 在替换按钮元素的同时提交表单
For readability, to demonstrate, I have moved the binding of the click event into script rather than in-line of the element. I also added an id in case of multiple forms, which is not really needed if you only got a single form as you can simply bind to $("form").on("submit")instead then
为了便于阅读，为了演示，我将 click 事件的绑定移动到脚本中，而不是元素的内联。我在多形式，这是不是真的需要，如果你只得到了一个形式，你可以简单地绑定到的情况下还添加了一个id $("form").on("submit")，而不是再
$("input[name='save']").on("click", function(){
$(this).replaceWith('<img class="submit-form" src=http://www.example.com/images/ajax-loader.gif />');
$("form").submit();
});
$("#myForm").on("submit", function(){
alert("form has been submitted.");
return false;
});
?Edit - Same code using in-line onclick
? 编辑 - 使用内联的相同代码 onclick
Moving the code into the in-line onClickstill works.
将代码移入内联onClick仍然有效。
Regarding the form submission, $(this)will be the button before it is replaced and be gone after, hence $(this).closest("form").submit()or any other form of selector using $(this)won't work.
关于表单提交，$(this)将是按钮之前被替换并被删除，因此$(this).closest("form").submit()或使用任何其他形式的选择器$(this)都将不起作用。
You must target your form for submit neutrally without using $(this)by either using $("form").submit()or if you have mutiple forms use an id as in $("#myForm").submit().
您必须将您的表单定位为中立提交，而不使用$(this)using$("form").submit()或者如果您有多个表单使用 id 中的$("#myForm").submit().
<form id="myForm" action="http://jsfiddle.net/">
<input class="button" name="save" type="submit" onclick="$(this).replaceWith('<img src=http://www.example.com/images/ajax-loader.gif />'); console.log(this); $('#myForm').submit();" value="SUBMIT">
</form>
DEMO- Submitting a form manually after replacing the button using inline onclick
演示- 使用内联 onclick 替换按钮后手动提交表单
As a side note, if you want the image to be displayed before the submit event is triggered you can apply a little trick like this:
作为旁注，如果您希望在触发提交事件之前显示图像，您可以应用这样的小技巧：
$("input[name='save']").on("click", function(){
$(this).replaceWith('<img class="submit-form" src=http://www.example.com/images/ajax-loader.gif />');
// Makes sure the image is rendered before the submit executes.
window.setTimeout(function(){
$("form").submit();
}, 300);
});
You can apply the same off course in your in-line onClick.
您可以在您的在线 onClick 中应用相同的 off course。
回答by mccannf
Say your form has id="myForm", then you can do the following:
假设您的表单有id="myForm"，那么您可以执行以下操作：
<input class="button" name="save" onclick="$(this).replaceWith('<img src=http://www.example.com/images/ajax-loader.gif />');$('#myForm').submit();" type="submit" value="SUBMIT">
回答by Luca Rainone
change your approach. Instead of remove button, try to hide it and append a new html element.
改变你的方法。而不是删除按钮，尝试隐藏它并附加一个新的 html 元素。
<input class="button" name="save"
onclick="$(this).hide(); $('<img src=http://www.example.com/images/ajax-loader.gif />').insertBefore(this);" type="submit" value="SUBMIT">
