Was ist der beste Weg, Code-Duplizierung in diesen beiden Funktionen zu vermeiden, die das gleiche tun?

Question

In Anbetracht dieser Form (die eine Absenden-Button enthält):

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

und dieser Link (die gleiche Form einreichen):

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

In dem folgenden jQuery-Code, wenn das #btn_submit Element geklickt wird, die Form (#review_form) mit Ajax vorgelegt:

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

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

Was ich tun möchte, ist die Absenden-Button entfernen und senden Sie das Formular über den Link oben (#lnk_submit) so etwas wie folgt aus:

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

Aber das Problem ist, dass diese den gesamten Code dupliziert in jQuery.fn.submitWithAjax oben definiert sind.

Was ist der beste Weg, um die Code-Duplizierung hier zu vermeiden?

Answer 1

Wie über Sie haben eine Funktion wie folgt aus:

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

Und dann verbinden beide Aktionen auf die Funktion:

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

Answer 2

Vielleicht bin ich zu stark zu vereinfachen, kann aber nicht einfach die Funktion einer Variablen zuweisen und wieder verwenden das?

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

Einfachstes Antwort (wenn auch vielleicht nicht eleganteste) ist die zweite Funktion für beide zu verwenden (die in das Formular unabhängig von explizit verweist, was die Funktion aufruft) und dann jeden ‚Trigger‘ gibt die gleiche Klasse und fügen Sie den Klick Ereignis für beide.

Answer 4

Wenn Sie die gleiche Funktionalität aus dem Hyperlink möchten, stellen Sie die Aktion des Hyperlinks einfach ein Klick auf den Button.

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