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() メソッドは、1 回の呼び出しで DOM からコンテンツを削除し、その場所に新しいコンテンツを挿入します。

remove()のドキュメントに従って、要素が削除されると、次のようになります。

要素自体に加えて、要素に関連付けられたすべてのバインドされたイベントと jQuery データが削除されます。

それが送信が実行されていない理由だと思います。

フォームを引き続き送信したい場合は、要素を置き換えた後に手動で送信をトリガーできます。

デモ- ボタン要素を置き換えながらフォームを送信する

読みやすくするために、クリック イベントのバインディングを要素のインラインではなくスクリプトに移動しました。$("form").on("submit")また、複数のフォームの場合に id を追加しました。これは、代わりに単純にバインドできるため、フォームが 1 つしかない場合は実際には必要ありません。

$("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 を使用してボタンを置き換えた後、フォームを手動で送信する

補足として、送信イベントがトリガーされる前に画像を表示したい場合は、次のようなちょっとしたトリックを適用できます。

$("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

アプローチを変更します。ボタンを削除する代わりに、ボタンを非表示にして新しい 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 に答える
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 に答える