1

无论如何，我都不是 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>.

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

谢谢

4

2 回答 2

2

只需省去您的头疼并将 javascript 放在它自己的标签中，从而消除转义引号的头疼；在示例中，请注意源中“图像”之前的“/”。

注意：如果图像文件夹的级别高于您调用的文件，您需要将 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">

编辑：2/17/2013 - 替代解决方案

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

<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">
于 2013-10-10T17:50:51.893 回答
0

您的图片网址中缺少引号

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

于 2013-10-10T17:23:08.537 回答