Question

我无论如何都不是jquery专家，我无法弄清楚这一点。

<input class="button" name="save" type="submit" onclick="$(this).replaceWith('<img src=images/loading.gif />'); console.log(this); $('#myForm').submit();" value="SUBMIT">

代码确实替换了按钮，但图像图标已损坏。但是，如果我右键单击损坏的图像并将url复制到loading.gif的正确有效路径。

我还在<script>添加了<head>个标记。

有人有想法解决这个问题吗？

由于

Answer 1

只需省去头痛并将javascript放入其自己的标签中，从而消除了逃避引号的麻烦;在示例中，请注意源中“images”之前的“/”。

注意：如果images文件夹的级别高于您调用的文件，则需要将URL设置为“../ images / loading.gif”

标签中的javascript

 <script type="javascript">
     $(function(){
         $("input[name='save']").click(function(e){
             $(this).replaceWith('<img src="/images/loading.gif" />');
             console.log(this);
             $('#myForm').submit();
         });
     });
</script>

并在你的HTML中：

<input class="button" name="save" type="submit" value="SUBMIT">

编辑：2013年2月17日 - 替代解决方案

我意识到这可能不是当时最好的解决方案，因为将来某个时候您可能会对html进行编辑，比如提交按钮或img src，然后必须更新jquery脚本。因此，加载两个html元素，将其中一个隐藏在初始页面加载中。然后在单击期间，隐藏按钮，并显示img。这也很好，因为您不必在您的javascript中写入任何src网址。

<input class="button" name="save" type="submit" value="SUBMIT">
<img src="/images/loading.gif" />


<script type="javascript">
    $("#loadingGif").hide();

    $("input[name='save']").click(function (e) {
        $(this).hide();
        $("#loadingGif").show();
        console.log(this);
        $('#myForm').submit();
    });

<script type="javascript">

Answer 2

您在图片网址中缺少引号

<img src=images/loading.gif />应为<img src="images/loading.gif" />

用加载gif替换提交按钮

2 个答案: