Envoi d'un formulaire avec JQuery Ajax se traduit par de multiples demandes (et présentations)

Question

J'ai couru dans un problème avec la soumission de formulaire JQuery et ont trouvé aucune réponse nulle part. Si quelqu'un pouvait faire la lumière sur ce point, il serait très apprécié.

La question: La première fois que je soumets la forme, il fonctionne très bien. Mais si je soumets la même forme une seconde fois, il envoie 2 demandes, 3 demandes pour la troisième fois, et ainsi de suite.

Script:

    function postInvokeFunctionForm(functionId){
      var formId = "#"+functionId+"-form";
      var formUrl = "invokeFunction.html?functionId="+functionId
      $(formId).submit(
        function(){
            $.ajax({
                type: 'POST',
                url: formUrl,
                data: $(formId).serialize(),
                success: function (data){
                 alert('successfully invoked function!' + data);
                }
            });
            return false;
           }
        );
   }

formulaire généré dynamiquement:

<form action="" method="post" id="xxxxx-form" class="invokeFunctionForm">
<input name="functionId" value="xxxxx" readonly="readonly" style="visibility: hidden;" type="text">
<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="submit">
</form>

Ceci est évidemment indésirable. La seule solution que je peux penser, id à réengendrer la forme (générée dynamiquement) après avoir été soumis, mais ce serait une opération coûteuse.

Est-ce un problème connu avec les arguments ajax JQuery ou suis-je manque quelque chose évidente? Y at-il peut-être une certaine forme de lieu récursion prendre?

Merci.

Answer 1

Chaque fois que vous cliquez sur le bouton, le code appelle votre fonction. Dans cette fonction, la ligne $(formId).submit(...); lie l'événement à la forme est de soumettre l'action. Cela se produit chaque fois que vous cliquez, en ajoutant plusieurs événements « soumettre » au formulaire. Vous devez unbind l'action première. Ainsi, vous pouvez appeler $(formId).unbind('submit').submit(...); à la place.

Answer 2

Quand vous faites cela

$(formId).submit(function(){})

Vous ajoutez la fonction à l'événement submit. Lorsque vous cliquez sur le bouton submit vous ajoutez un ce function et soumettre par le comportement par défaut de input type="submit". Lorsque vous cliquez sur vous ajoutez à nouveau le même function à l'événement submit. Donc, lorsque vous cliquez sur une fois que vous avez un function en cas de submit, lorsque vous cliquez deux fois vous avez deux functions.

Cela dit, vous pouvez faire ce que vous voulez comme ceci:

$('#inputInvokeId').submit(function(){
var formUrl = "invokeFunction.html?functionId="+inputInvokeId;
$.ajax({
                type: 'POST',
                url: formUrl,
                data: $(formId).serialize(),
                success: function (data){
                 alert('successfully invoked function!' + data);
                }
            });
            return false;
           }

})

<form action="" method="post" id="xxxxx-form" class="invokeFunctionForm">
<input name="functionId" value="xxxxx" readonly="readonly" style="visibility: hidden;" type="text">
<input value="Invoke" id="inputInvokeId" type="submit">
</form>

Answer 3

Modifier

<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="submit">

à

<input value="Invoke" onclick="postInvokeFunctionForm(xxxxx);" type="button">

Le est ce qui provoque la double soumission.