3

我有以下 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()去。

4

3 回答 3

6

根据replaceWith()文档：

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

当一个元素被删除时，根据remove()文档：

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

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

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

DEMO - 在替换按钮元素时提交表单

为了便于阅读，为了演示，我将 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)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>

演示- 使用内联 onclick 替换按钮后手动提交表单

作为旁注，如果您希望在触发提交事件之前显示图像，您可以应用如下小技巧：

$("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 中应用相同的课程。

于 2012-11-27T22:17:37.023 回答
1

假设您的表单有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">
于 2012-11-27T21:51:58.993 回答
1

改变你的方法。尝试隐藏它并附加一个新的 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">
于 2012-11-28T07:30:21.580 回答