1

設定APIを使用してワードプレスでテーマオプションページを作成しました。ページ上のフォームをajaxで更新したい。最初は問題なく動作しているように見えますが、ページを更新せずにもう一度「送信」をクリックすると、ページ全体が「0」になります。wordpressネイティブを使用してエラーと検証を処理しているため、フォーム全体がAJAXを使用してリロードされることに注意してください。ajaxリクエスト自体をトリガーするフォームがリロードされるため、これは奇妙です。これに対する回避策があれば教えてください。ここにコードがあります

$cg("#cgform").submit(function(){
    var b = $cg(this).serialize();
    var cgdata =  { action : "cg_options_save", cgnonce: cgform.cgnonce ,data: b };
    cg_ajax_request(cgdata,cg_form_callback);  
    return false;
});

//Ajax request
function cg_ajax_request(data,fcall){
    $cg.post(ajaxurl, data, function (response) {fcall(response);}); 
}

cg_ajax_callback 関数は、受信したフォームを div 内に入力しました。

これを処理する「正しい」方法を教えてください

4

1 に答える 1

2

問題は、イベント ハンドラーが ajax 呼び出しによってリロードされるフォームにバインドされていることです。2 回目にフォームを送信しようとすると、実際には最初の ajax 呼び出しによって挿入された新しいインスタンスであり、イベント ハンドラーがアタッチされていません。代わりにメソッドを使用しonてイベント ハンドラーをバインドします。これにより、挿入時にイベント ハンドラーが新しいフォームに動的にバインドされます。

$cg(document).on('submit', "#cgform", function(){
    var b = $cg(this).serialize();
    var cgdata =  { action : "cg_options_save", cgnonce: cgform.cgnonce ,data: b };
    cg_ajax_request(cgdata,cg_form_callback);  
    return false;
});
于 2013-04-14T14:30:18.003 に答える