¿Cuál es la mejor manera de evitar la duplicación de código en estas dos funciones que hacen lo mismo?

Question

Dado este formulario (que contiene un botón de envío):

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

y este enlace (para enviar el mismo formulario):

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

En el siguiente código jQuery, cuando se hace clic en el elemento #btn_submit , el formulario ( #review_form) se envía 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();
})

Lo que quiero hacer es eliminar el botón de enviar y enviar el formulario usando el enlace de arriba ( #lnk_submit ) algo como esto:

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

Pero el problema es que esto duplica todo el código en jQuery.fn.submitWithAjax definido anteriormente.

¿Cuál es la mejor manera de evitar la duplicación de código aquí?

Answer 1

¿Qué tal si tienes una función como esta?

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

Y luego vincula ambas acciones a la función:

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

Answer 2

Tal vez estoy simplificando demasiado, pero ¿no puedes simplemente asignar la función a una variable y reutilizarla?

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 respuesta más simple (aunque tal vez no sea la más elegante) es usar la segunda función para ambos (que se refiere explícitamente a su forma independiente de lo que llama la función), y luego dar a cada 'disparador' la misma clase y adjuntar el clic evento a ambos.

Answer 4

Si desea la misma funcionalidad del hipervínculo, realice la acción del hipervínculo simplemente haciendo clic en el botón.

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