같은 일을하는이 두 기능에서 코드 복제를 피하는 가장 좋은 방법은 무엇입니까?

Question

이 양식 (제출 버튼 포함)이 주어지면 :

<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 위에서 정의되었습니다.

여기서 코드 복제를 피하는 가장 좋은 방법은 무엇입니까?

Answer 1

다음과 같은 기능이 있습니다.

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

그런 다음 두 동작을 기능에 연결합니다.

$(document).ready(submitWithAjax);
$("#lnk_submit").click(submitWithAjax);

Answer 2

어쩌면 나는 지나치게 단순화하고 있지만 기능을 변수에 할당하고 재사용 할 수 없습니까?

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;
});

Answer 3

가장 간단한 답변 (가장 우아하지는 않지만)은 두 가지 기능을 사용하는 것입니다 (기능을 부르는 것과 독립적으로 명시 적으로 지칭하는 양식을 명시 적으로 지칭). 각 '트리거'를 동일한 클래스에 제공하고 클릭 이벤트를 둘에 첨부합니다. .

Answer 4

하이퍼 링크에서 동일한 기능을 원한다면 하이퍼 링크의 동작을 단순히 버튼 클릭으로 만드십시오.

$('#lnk_submit').click(function(e){ $('#btn_submit').click(); return false; });