Отправка формы с jQuery ajax приводит к нескольким запросам (и представлениям)

Question

Я столкнулся с вопросом с представлениями формы jQuery и не нашел никаких ответов нигде. Если кто-то мог пролить свет на это, это было бы высоко оценено.

Выпуск: первый раз, когда я отправляю форму, это работает нормально. Но Если я отправлю ту же форму во второй раз, он отправляет 2 запроса, 3 запроса в третий раз и так далее.

Сценарий:

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

Динамически сгенерированная форма:

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

Это, очевидно, нежелательно. Единственное решение, о котором я могу придумать, идентификатор для повторного возмещения (динамически сгенерированной) формы после подачи, но это будет дорогой операцией.

Является ли это известная проблема с jquery ajax представлениями или я пропускаю что-то очевидное? Есть ли возможно ли какая-то форма рекурсии?

Спасибо.

Answer 1

Каждый раз, когда вы нажимаете кнопку, код вызывает вашу функцию. В этой функции линия $(formId).submit(...); является обязательным событием к предложению формы. Это происходит каждый раз, когда вы нажимаете, добавляя несколько событий «отправить» в форму. Тебе нужно рассеянный действие сначала. Так что вы могли бы позвонить $(formId).unbind('submit').submit(...); вместо.

Answer 2

Когда вы делаете это

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

Вы добавляете функцию к submit мероприятие. Когда вы нажмете в submit кнопка вы добавляете это function и отправка через поведение по умолчанию input type="submit". Анкет Когда вы снова нажимаете, вы добавляете то же самое function к тому submit мероприятие. Поэтому, когда вы нажимаете один раз, у вас есть один function в submit событие, когда вы нажимаете два раза, у вас есть два functions.

Тем не менее, вы можете делать то, что хотите, так:

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

Сдача

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

к

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

<Тип ввода = «Отправить»> - это то, что вызывает двойное представление.