Jquery .on () enviar evento

98

Eu tenho um problema com .on(). Eu tenho vários elementos de formulário (formulários com class="remember"), também adiciono outro form.rememberusando AJAX. Então, eu quero lidar com o evento submit algo como:

$('form.remember').on('submit',function(){...})

mas o formulário adicionado com AJAX não funciona com ele.

Onde está o problema? É um bug?

jquery ajax forms submit Anton Abramov
fonte
9
Tente$(document).on('submit','form.remember',function(){...})
Sergio
1
@Sergio substitua documentpelo pai estático mais próximo.
Mark Baijens

Respostas:

217

Você precisa delegar o evento ao nível do documento

$(document).on('submit','form.remember',function(){
   // code
});

$('form.remember').on('submit'funcionam da mesma forma, $('form.remember').submit(mas quando você usa $(document).on('submit','form.remember', também funcionará para o DOM adicionado posteriormente.

Dipesh Parmar
fonte
24
Também tenha em mente que $(document).ontem um desempenho muito inferior a $('form.remember').on('submit'. Agora, ele precisa ouvir todos os eventos de envio no documento. É muito melhor restringir um pouco o escopo do que ouvir on document, se possível
Liam
7
$ ('body'). on ('submit', 'form.remember', function () {// code}); resolveu meu problema
Olotin Temitope
Mesmo que @Liam esteja correto, $ (document) .on ainda é útil para operações CRUD em elementos renderizados ajax.
Norielle Cruz
38

Tive um problema com os mesmos sintomas. No meu caso, descobri que minha função de envio estava faltando a instrução "return".

Por exemplo:

 $("#id_form").on("submit", function(){
   //Code: Action (like ajax...)
   return false;
 })
vitor_gaudencio_oliveira
fonte
2
Observe que return false;não enviaremos o formulário. Para enviar o formulário use return true;.
Kai Noack
0

O problema aqui é que o "on" é aplicado a todos os elementos que existem NO MOMENTO. Ao criar um elemento dinamicamente, você precisa executar o on novamente:

$('form').on('submit',doFormStuff);

createNewForm();

// re-attach to all forms
$('form').off('submit').on('submit',doFormStuff);

Como os formulários geralmente têm nomes ou IDs, você também pode anexar ao novo formulário. Se estou criando muitas coisas dinâmicas, incluirei uma função de configuração ou ligação:

function bindItems(){
    $('form').off('submit').on('submit',doFormStuff); 
    $('button').off('click').on('click',doButtonStuff);
}

Então, sempre que você cria algo (botões geralmente no meu caso), eu apenas chamo bindItems para atualizar tudo na página.

createNewButton();
bindItems();

Eu não gosto de usar 'body' ou elementos de documento porque com guias e modais eles tendem a ficar por aí e fazer coisas que você não espera. Eu sempre tento ser o mais específico possível, a menos que seja um projeto simples de 1 página.

Danial
fonte