Método para resolver problemas de eventos click y otros绑定无效 a elementos DOM

之前一直遇到js插件生成的元素，click事件无效的问题，重新绑定也不行，终于找到解决方法，在此记下来。

同时加深对js事件处理机制的理解。

1. 事件被解绑

这种情况下一般不会导致click失效，但以下情况，click事件就失效了：

$(function(){
 $('.btn').unbind()
})
$('.btn').click(function(){
 //...
 })

所以，click事件要有个好习惯：

$(function(){
 $('.btn').click(function(){
 //...
 })
}) 

2. js插件异步/动态加载dom

一般含有等待时间/开始运行时间：WaitTime

此时直接绑定/监听无效：

$(function(){
 $('.container .btn').on('click',function(){
 //...
 })
}) 

Solución1：

$(function(){
 setTimeout(function{ 
 $('.container .btn').click(function(){}
  //...
  })
 //Evento de clic después de que .btn se cargue 
 },WaitTime) 
}) 

Solución2(Delegación de eventos, es decir, delegar a los elementos principales):

$(function(){
 $('.container').on('click','.btn',function(){}
 //...
 })
}) 

3DOM cargado de manera asincrónica por .ajax

• Se puede agregar un evento de clic en el cuerpo de la función done()
• Igual2Método de delegación de eventos.

4No hay respuesta al hacer clic en el enlace

El siguiente código causará que los enlaces 'a' no puedan saltar a pesar de tener 'href'

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
}) 

Solución:

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
 $('a').unbind()
})

Conclusión

1Enlaces relacionados con .ligadura de eventos, escucha de eventos, delegación de eventos

2Enlaces relacionados con .captura y burbuja de eventos

 target.addEventListener(type, listener[, options]);
 target.addEventListener(type, listener[, useCapture]);

Captura de eventos

El elemento principal ocurre primero, seguido por el elemento secundario

Burbuja de eventos

Los elementos secundarios ocurren primero, seguidos por los elementos principales

3Secuencia de ejecución de .javascript

Esto es todo el contenido de este artículo, esperamos que el contenido de este artículo pueda ayudar a todos en su aprendizaje o trabajo de alguna manera, y también esperamos que todos apoyen a la tutorial de grito!

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.