Qual è il modo migliore per evitare la duplicazione del codice in queste due funzioni che fanno la stessa cosa?

Question

Dato questo modulo (che contiene un pulsante di invio):

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

e questo link (per inviare lo stesso modulo):

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

Nel seguente codice jQuery, quando si fa clic sull'elemento #btn_submit , il modulo ( #review_form) viene inviato con 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();
})

Quello che voglio fare è rimuovere il pulsante di invio e inviare il modulo utilizzando il link sopra ( #lnk_submit ) qualcosa del genere:

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

Ma il problema è che questo duplica tutto il codice in jQuery.fn.submitWithAjax definito sopra.

Qual è il modo migliore per evitare la duplicazione del codice qui?

Answer 1

Che ne dici di avere una funzione come questa:

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

E quindi collegare entrambe le azioni alla funzione:

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

Answer 2

Forse sto semplificando troppo, ma non puoi semplicemente assegnare la funzione a una variabile e riutilizzarla?

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

La risposta più semplice (anche se forse non la più elegante) è usare la seconda funzione per entrambi (che si riferisce esplicitamente al tuo modulo indipendentemente da ciò che sta chiamando la funzione), e quindi dare ad ogni 'trigger' la stessa classe e allegare il clic evento per entrambi.

Answer 4

Se si desidera la stessa funzionalità dal collegamento ipertestuale, rendere l'azione del collegamento ipertestuale semplicemente un clic del pulsante.

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