Anexando eventos aos elementos html dinâmicos em jquery

ao trabalhar com conteúdo carregado dinamicamente em aplicativos da web, anexando os ouvintes de eventos a elementos que não podem existir na página de página, pode colocar um desafio. Neste artigo, exploraremos como lidar efetivamente a esse cenário usando a biblioteca jQuery. Queremos adicionar um manipulador de eventos de clique a todos os elementos com esta classe, independentemente de estarem presentes na carga da página ou adicionados dinamicamente. Inicialmente, podemos empregar o seguinte código:

$ (function () { $ (". MyClass"). Clique (function () { // Faça algo }); });This code works well for existing elements with the ".myclass" class, but it will not attach event handlers to elements added later via dynamic operations, such as AJAX or dynamically generated HTML.

$(function() {
    $(".myclass").click(function() {
        // Do something
    });
});

To address this challenge, we can leverage the jQuery

Método, que nos permite vincular manipuladores de eventos a elementos que ainda não existem no DOM. Em vez de anexar diretamente os eventos a um seletor específico, especificamos um elemento pai e usamos a delegação de eventos para capturar os eventos para descendentes adicionados dinamicamente. // Faça algo }); Neste exemplo, clicando em qualquer elemento que corresponda ao seletor 'a.myclass' dentro do

acionará o manipulador de eventos, independentemente de o elemento estar presente na carga da página ou adicionar posteriormente. O elemento body é usado como elemento pai neste caso, mas qualquer elemento pai estático que existe quando o método

$('body').on('click', 'a.myclass', function() {
    // Do something
});

e o seguinte código javascript: $ ('body'). $ (this) .Append (' Quando um usuário clica no elemento #anchor1, um novo link com a classe ".myclass" é gerado dinamicamente. Graças ao . Efetivamente.