En el pasado, utilicé el enlace de JQuery a los eventos directamente. Sin embargo, en ese momento, no generé elementos DOM dinámicamente, pero los elementos DOM que originalmente existían en la página para la unión de eventos. Recientemente, cuando probé el evento de enlace DOM generado dinámicamente, descubrí que el evento no era válido, así que lo probé:
1. Causas del fracaso del evento:
(1) La unión del evento de enlace solo es válido para elementos presentes en el DOM. No se puede monitorear los elementos que agregamos dinámicamente más tarde, por lo que no se puede atar.
(2) Del mismo modo, cuando usa var aa = document.getElementsBytagName ("elemento dinámico generado"); Para obtener elementos generados dinámicamente, porque la página web solo realizará la unión de inicialización una vez, y los elementos DOM generados dinámicamente no se pueden monitorear después de eso.
2. Solución:
(1) vincule más eventos en cada lugar generado dinámicamente, como el ejemplo en este blog
(2) Cambiar el enlace a Live, porque Live se monitorea en tiempo real y también es efectivo para elementos DOM recientemente agregados (debido a que es constantemente vinculante y juicio, puede afectar los problemas de rendimiento web)
(3) Cambiar el enlace al delegado, porque el delegado se monitorea en tiempo real.
(4) En jQuery1.7, los métodos bind (), live () y delegate () fueron reemplazados por ON.
3. Con respecto a los motivos de la reciente falla del evento: en la página web original (el código se puede ver en https://github.com/ufowl/ife/tree/master/stage02/task16), quiero obtener el botón Eliminar el botón generado dinámicamente en la tabla para ayudar a delete el botón Delete Binking el tiempo de enlace, pero el evento de Delete no está invalido. Al inicializar el enlace del evento, el botón en la tabla obtenida ya está vacía, por lo que los elementos encuadernados siempre están vacíos, por lo que no hay respuesta al hacer clic en el botón del botón.
4. La solución final: primero obtenga la tabla, luego ata el evento de clic de la tabla (porque la tabla está en el elemento DOM que ya existe), y luego capture el objetivo del evento (por ejemplo, haga clic en el botón en la tabla. En este momento, porque el botón ha generado y agregado dinámicamente en la tabla, el botón existe. En este momento, el objetivo se refiere al botón) y luego realizar la operación correspondiente.
NOTA: Aquí se observan dos problemas:
(1) Los elementos en la tabla se han agregado a la tabla, por lo que al hacer clic en ese botón, el botón que obtiene es el que desea.
(2) ¿Por qué se han agregado los botones a la tabla, pero aún no se puede obtener? Debido a que los botones en la tabla se obtienen cuando se inicializa la función init (), pero no se ha realizado ninguna operación en este momento, por lo que lo que se obtiene está vacío, por lo que no hay elementos vinculados.
Los dos problemas que deben prestarse la atención anteriores deben distinguirse claramente, y esta es la clave del problema.
5. Acerca de Bind: después de cada evento vinculante, el evento estará obligado. Descansar y luego reembolsarse, de lo contrario, el evento siempre existirá. Entonces, es por eso que cuando se trabaja en un proyecto, a veces el resultado de la solicitud AJAX se superpondrá como 1, 2, 4, 8. Debido a que si se usa BIND, cada evento de activación estará vinculado a una operación. Por lo tanto, cuando se activa la primera vez, se solicitará una solicitud AJAX una vez; Cuando se activa la segunda vez, la solicitud AJAX será 1+1 = 2 veces; La tercera vez es 1+2+1 = 4 veces; La cuarta vez es 1+2+4+1 = 8 veces, y así sucesivamente. Por lo tanto, si usa eventos Bind to Bind, primero debe desabrochar los eventos originales del elemento y luego Bind a los eventos, de modo que las solicitudes de AJAX no causen varias veces.
El artículo anterior sobre las razones y soluciones para la falla de la generación dinámica de incidentes vinculantes de DOM es todo el contenido compartido por el editor. Espero que pueda darle una referencia y espero que apoye más a Wulin.com.