2


0

同じことをするこれら2つの関数でコードの重複を避けるための最善の方法は何ですか?

このフォーム(送信ボタンが含まれています)を考えると:


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

Submit with ajax! (hyperlink)

次の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 Answer


2


あなたはどうでしょうか?

function submitWithAjax(){$( "#review_form")。submit(function(){$ .post(this.action、$(this).serialize()、null、 "script"); falseを返す;}); }

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

$(document).ready(submitWithAjax); $( "#lnk_submit")。(submitWithAjax)をクリックしてください。


1


おそらく私は過度に単純化していますが、あなたは単に関数を変数に代入してそれを再利用することはできませんか?

var submitWithAjaxFn = function(){this.submit(function(){$ .post(this.action、$(this).serialize()、null、 "script"); falseを返します;})thisを返します。 ;

jQuery.fn.submitWithAjax = submitWithAjaxFn; $( "#lnk_submit")。クリック(function(){$( "#review_form")。送信(submitWithAjaxFn); falseを返す;});


0


最も単純な答えは(おそらく最も洗練されているわけではありませんが)両方に2番目の関数を使用することです(これは関数を呼び出すものとは無関係にあなたのフォームを明示的に参照します)。 。


0


ハイパーリンクから同じ機能を使いたい場合は、単にボタンをクリックするだけでハイパーリンクのアクションを実行できます。

$( '#lnk_submit')。クリック(function(e){$( '#btn_submit')。click(); falseを返す;});