Quel est le meilleur moyen d'éviter la duplication de code dans ces deux fonctions qui font la même chose?

Question

Étant donné ce formulaire (qui contient un bouton d'envoi):

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

et ce lien (pour soumettre le même formulaire):

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

Dans le code jQuery suivant, lorsque vous cliquez sur l'élément #btn_submit , le formulaire ( #review_form) est soumis avec 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();
})

Ce que je veux faire, c'est supprimer le bouton d'envoi et soumettre le formulaire à l'aide du lien ci-dessus ( #lnk_submit ), comme suit:

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

Mais le problème est que cela duplique tout le code de jQuery.fn.submitWithAjax défini ci-dessus.

Quel est le meilleur moyen d'éviter la duplication de code ici?

Answer 1

Et si vous aviez une fonction comme celle-ci:

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

Et liez ensuite les deux actions à la fonction:

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

Answer 2

Je simplifie peut-être à l'excès, mais vous ne pouvez pas simplement affecter la fonction à une variable et la réutiliser?

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 réponse la plus simple (bien que peut-être pas la plus élégante) consiste à utiliser la deuxième fonction pour les deux (qui fait explicitement référence à votre formulaire, indépendamment de ce qui appelle la fonction), puis à attribuer à chaque "déclencheur" la même classe et à joindre le clic. événement à la fois.

Answer 4

Si vous souhaitez utiliser les mêmes fonctionnalités que le lien hypertexte, faites-en un simple clic sur le bouton.

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