2

このフォーム (送信ボタンを含む) を考えると:

<form id="review_form">
  <input type="submit" id="btn_submit" value="Submit with ajax! (submit button)">
</form>

およびこのリンク (同じフォームを送信するため):

<a href="#" id="lnk_submit">Submit with ajax! (hyperlink)</a>

次の jQuery コードでは、#btn_submit要素がクリックされると、フォーム (#review_form)が ajax で送信されます。

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

$(document).ready(function() {
  $("#btn_submit").submitWithAjax();
})

私がしたいのは、送信ボタンを削除し、上記のリンク( #lnk_submit) を使用してフォームを送信することです。

$("#lnk_submit").click(function(){ 
   $("#review_form").submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
    }); 
   return false;
});

しかし問題は、これが上記で定義されたすべてのコードを複製することです。 jQuery.fn.submitWithAjax

ここでコードの重複を避ける最善の方法は何ですか?

4

4 に答える 4

2

次のような関数があるとしたらどうでしょうか。

function submitWithAjax() {
    $("#review_form").submit(function() {
        $.post(this.action, $(this).serialize(), null, "script");
        return false;
    });         
}

次に、両方のアクションを関数にリンクします。

$(document).ready(submitWithAjax);
$("#lnk_submit").click(submitWithAjax);
于 2009-10-27T21:02:42.890 に答える
1

単純化しすぎているかもしれませんが、関数を変数に代入して再利用することはできませんか?

var submitWithAjaxFn = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

jQuery.fn.submitWithAjax = submitWithAjaxFn;
$("#lnk_submit").click(function(){ 
   $("#review_form").submit(submitWithAjaxFn); 
   return false;
});
于 2009-10-27T21:03:41.653 に答える
0

最も簡単な答え (最もエレガントではないかもしれませんが) は、両方に 2 番目の関数を使用し (これは、関数を呼び出しているものとは無関係にフォームを明示的に参照します)、各「トリガー」に同じクラスを与え、クリック イベントを両方にアタッチすることです。 .

于 2009-10-27T21:02:27.777 に答える
0

ハイパーリンクから同じ機能が必要な場合は、ハイパーリンクのアクションをボタンをクリックするだけにします。

$('#lnk_submit').click(function(e){ $('#btn_submit').click(); return false; });
于 2009-10-27T21:03:06.480 に答える