JQuery одна функция не работает, как ожидалось

Question

У меня есть следующие JSP:

... 
<script type="text/javascript"> 
$(function() { 

    // prevent multiple submissions 
    $('#saveCallListBtn').one("click", function() { 
     $('#callListForm').submit(); 
    }); 

}); 

... 
</script> 
... 
<form:form id="callListForm" commandName="callList" action="${contextPath}/calllist/save" method="POST" htmlEscape="true"> 

... 

<td colspan="2" style="text-align: center"> 
    <input id="saveCallListBtn" type="submit" value="Save" class="button-med"/> 
</td> 

... 

</form:form> 

поведение Я ищу, только все формы должны быть представлены один раз независимо от того, сколько раз нажал на кнопку сохранить. Используя функцию jQuery .one, я могу правильно выполнить приведенный выше код. Поскольку форма будет отправляться несколько раз, если я нажимаю более одного раза.

Следующий код будет работать нормально:

$('#saveCallListBtn').on("click", function() { 
     $(this).prop("disabled", true); 
     $('#callListForm').submit(); 
    }); 

Но мне интересно знать, что я делаю неправильно с функцией .one.

Answer 1

Обратите внимание на type здесь:

<input id="saveCallListBtn" type="submit" value="Save" class="button-med"/> 

submit кнопку в form представит форму, не требуется JavaScript. Поэтому, когда ваш обработчик автоматически удаляется, при следующем нажатии происходит обработка по умолчанию (отправка формы), любезно предоставленная браузером.

Единственная причина, по которой вы не видите представленную форму дважды при первом щелчке, я подозреваю, заключается в том, что акт отправки формы начинает процесс срывания страницы, чтобы освободить место для представления ,

---

FWIW, я хотел бы предложить вам не имеют click обработчик на кнопку, а скорее submit обработчик на форме, что, если все хорошо, и это будет позволять происходить представление, отключает и устанавливает флаг для предотвращения отправки в будущем, так как формы могут быть представлены несколькими способами. (О некоторых формах, при нажатии Enter в текстовом поле будет делать это, например.)

т.д .:

$("#callListForm").on("submit", function(e) { 
    var $btn = $("#saveCallListBtn"); 
    var valid = !$btn.prop("disabled"); 
    if (valid) { 
     // ...do any other validity checks you may want, set `valid` to false 
     // if problems encountered... 
    } 
    if (valid) { 
     $btn.prop("disabled", true); 
    } else { 
     e.preventDefault(); 
    } 
}); 

Answer 2

Функция JQuery one выполнит обработчик события только один раз. Однако поведение элемента по умолчанию для элемента будет выполняться неограниченное время.

Изменить тип кнопку button, таким образом, что он не имеет поведение по умолчанию нет:

<input id="saveCallListBtn" type="button" value="Save" class="button-med"/>