Como posso capturar e reativar corretamente o evento de envio de formulário, garantido?
Este provavelmente não é o seu "Como faço para capturar eventos de envio de formulário?" questão.
estou tentando entenderprecisamente como os eventos de submissão de formulários são manipulados pelo jQuery, pelo Javascript e pelo navegador (IE / FF / Chrome / Safari / Opera) - e as relações entre eles. (Veja minha outra pergunta.Depois de horas pesquisando e pesquisando, ainda não consigo chegar a uma conclusão, seja por discórdia ou imprecisão.
Estou terminando um script que se integra aos formulários do site para que os formulários não possam ser enviados até que uma solicitação AJAX seja exibida.
Idealmente:
Usuário preenche o formulárioFormulário é submetido - mas nenhum manipulador de evento ligado anteriormente é chamado, exceto o meuMeu manipulador faz uma solicitação da API (de forma assíncrona, é claro)Usuário confirma os resultados da validação da resposta da APIO envio de formulário continua normalmente, automaticamente, invocando os outros manipuladores que antes eram suprimidosMeu entendimento atual é que: (estes podem estar errados, por favor corrija-me em caso afirmativo)
jQuery vincula os manipuladores de evento de envio de formulário ao botão de envioclick
eventosManipuladores de eventos diretamente no elemento submitclick
eventos (seja na marcação comoonclick=""
ou ligado usando jQuery) são executados primeiroManipuladores de eventos no formuláriosubmit
eventos (seja na marcação comoonsubmit=""
ou ligado usando jQuery) são executados a seguirChamando$('[type=submit]').click()
não invoca o formuláriosubmit
evento, então seus manipuladores não são chamadosChamando$('form').submit()
não invoca o botão de envioclick
evento, então seus manipuladores não são chamadosNo entanto, de alguma forma, um usuário que clica no botão enviar acaba invocando manipuladores vinculados ao formulário desubmit
evento ... (mas como mencionado acima, invocar clique no botão de envio não faz o mesmo)De fato,qualquer maneira como o usuário envia o formulário (via botão de envio ou pressionando Enter), manipuladores vinculados com jQuery ao formuláriosubmit
evento são chamados ...Agora mesmo estou:
Unbinding handlers bound with jQuery para o botão de envioclick
evento, preservando uma referência a elesVinculando meu próprio manipulador ao botão de envioclick
evento, por isso é executado primeiroTomando todos os manipuladores ligados na marcação usandoonclick=""
eonsubmit=""
(em seus respectivos elementos) e re-ligando-os usando jQuery (então eles executam após o meu), em seguida, definindo os atributos paranull
Re-ligando seus manipuladores (da etapa 1) para que sejam executados por últimoNa verdade, isso tem sido notavelmente eficaz em meus próprios testes, de modo que meu manipulador de eventos é acionado primeiro (essencial).
O problema e minhas perguntas:
Meu manipulador dispara primeiro, exatamente como esperado (até agora). O problema é que meu manipulador é assíncrono, então eu tenho que suprimir (preventDefault / stopPropagation / etc) a formasubmit
ou enviar botãoclick
evento que o invocou ... até que a solicitação da API seja concluída. Então, quando a solicitação da API voltar e tudo estiver A-OK, preciso invocar novamente o formulário automaticamente. Mas por causa das minhas observações acima, como posso ter certezatodos os manipuladores de eventos são disparados como se fossem um formulário natural?
Qual é a maneira mais limpa de pegar todos os seus manipuladores de eventos, colocar o meu primeiro e, em seguida, invocar novamente o formulário para que tudo seja chamado em sua ordem correta?
E qual a diferença, se houver, entre$('form').submit()
e$('form')[0].submit()
? (E o mesmo para$('[type=submit]').click()
e$('[type=submit]')[0].click()
)
tl; dr, O que é a documentação canônica, clara e única para todos os formulários sobre JavaScript / jQuery / navegador form-submit-event-handling? (Eu não estou procurando por recomendações de livros.)
Algumas explicações: Estou tentando compensar muito do Javascript nas páginas de checkout do carrinho de compras, onde às vezes o formulário é enviado somente quando o usuário CLICKS the BUTTON (não um botão de envio) na parte inferior da página, ou há outros cenários complicados. Até agora, tem sido bastante bem sucedido, é apenas re-invocar o envio que é realmente o problema.