Das Einreichen eines Formulars mit JQuery Ajax führt mehrere Anfragen (und Anträge)

Question

Ich habe mit JQuery Form Einreichungen in ein Problem laufen und haben keine Antworten überall gefunden. Wenn jemand etwas Licht auf diesem verschütten könnte, wäre es sehr geschätzt werden.

Das Problem: Das erste Mal, dass ich das Formular abschicken, es funktioniert gut. Aber Wenn ich die gleiche Form ein zweites Mal vorlegen, sendet er zwei Anfragen, 3 Anfragen zum dritten Mal, und so weiter.

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;
           }
        );
   }

Dynamisch generierte Form:

<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>

Dies ist offensichtlich unerwünscht. Die einzige Lösung, die ich, id denken, kann wieder macht die (dynamisch generierte) Form nach vorgelegt werden, aber das wäre eine teuere Operation sein.

Ist das ein bekanntes Problem mit JQuery Ajax-Vorlagen oder bin ich etwas fehlt offensichtlich? Gibt es vielleicht irgendeine Form von Rekursion stattfindet?

Danke.

Answer 1

Jedes Mal, wenn Sie auf die Schaltfläche klicken, wird der Code Ihre Funktion aufruft. In dieser Funktion das Ereignis der Leitung $(formId).submit(...); auf die Form bindend ist Aktion vorzulegen. Dies geschieht jedes Mal klicken, mehrere „Eintragen“ Ereignisse zum Formular hinzufügen. Sie müssen unbind die Aktion zuerst. So rufen Sie könnten $(formId).unbind('submit').submit(...); statt.

Answer 2

Wenn Sie das tun

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

Sie fügen die Funktion zum submit Ereignisse. Wenn Sie in der submit Schaltfläche klicken Sie dieses function und Übertragung über das Standardverhalten von input type="submit" hinzufügen. Wenn Sie erneut auf fügen Sie die gleiche function zum submit Ereignisse. Also, wenn Sie einmal klicken Sie einen function im submit Veranstaltung haben, wenn Sie zweimal auf Sie haben zwei functions.

gesagt, dass Sie tun können, was Sie so wollen:

$('#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

Ändern

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

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

Die ist, was die Doppel einreichen verursacht.