输入type =“ submit”按钮onClick：jQuery replaceWith阻止表单提交

Question

我有以下HTML：

<input class="button" name="save" onclick="$(this).replaceWith('<img src=http://www.example.com/images/ajax-loader.gif />');" type="submit" value="SUBMIT">

当单击按钮时，表单不再尝试提交，而是将其自身替换为正在旋转的AJAX加载gif，并且不执行任何操作。如果我删除onclick部分，它将提交。

长话短说，这是给客户的，但我不能以

$(function() { $(input[name=save]).on({click:function() { $(this).replaceWith(...); } }); });

为什么替换后仍不提交？我不在e.preventDefault()任何地方。

Answer 1

根据replaceWith（）文档：

.replaceWith（）方法从DOM中删除内容，并通过一次调用将新内容插入其位置。

删除元素后，根据remove（）文档：

除了元素本身之外，所有绑定的事件和与元素相关联的jQuery数据都将被删除。

我假设这就是为什么提交未执行的原因。

如果您希望表单仍然提交，则可以在替换元素后手动触发提交。

演示 -替换按钮元素时提交表单

为了便于阅读，为了说明这一点，我将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;
});

编辑-使用内联代码 onclick

将代码移入内联onClick仍然有效。

关于表单提交，$(this)将是替换前的按钮，之后是按钮，因此$(this).closest("form").submit()或其他任何形式的选择器$(this)都无法使用。

您必须将表单定位为中性提交，而不要使用$(this)，$("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>

演示 -使用嵌入式onclick替换按钮后手动提交表单

附带说明一下，如果您希望在触发Submit事件之前显示图像，则可以应用如下小技巧：

$("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);
});

您可以在在线onClick中应用相同的课程。