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?

— Anton Abramov
fonte

9

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

— Sergio

1

@Sergio substitua documentpelo pai estático mais próximo.

— Mark Baijens

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