Estoy atascado con el DOM. Cuando se presiona el botón de búsqueda, el script JS inyectará el elemento 1 y aparecerá una nueva función (A) después de inyectar el elemento 1.
Cambié el nombre de la clase en element1 a element2. Cuando quiero ejecutar la función (A), ocurre un error, cuya función (A) aún indexa el elemento 1, no el elemento 2. ¿Cómo puedo arreglarlo?
$('.search').click(function() { $('button').after('<div class="ab">New div element here!</div>') // in actual this code will run by click button and this code working $(this).siblings().last().toggleClass("b") // this code is not triggered, it should be triggered $('.a:not(.b)').click(function() { console.log('clickety click'); }) }) .b { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="search">search</button>Cuando vincula los eventos, permanecen vinculados hasta que se desatan del elemento. Entonces, si desea "limpiar" sus enlaces de eventos, puede usar jQuery unbind() antes de vincular nuevos eventos:
$('your.selector').unbind().click(... Otra solución es realizar una verificación de clase dentro de la devolución de llamada de la función de clic, para asegurarse de que el elemento todavía tenga (o no tenga) alguna clase. Solo asegúrese de si necesita o no llamar a algún tipo de preventDefault() para obtener un mejor control porque el elemento button tiene un comportamiento predeterminado.
$('.a').click(function () { if ( ! $(this).hasClass('b') ){ // Do things with .a elements that don't have .b class } })