jQuery ofrece varios controladores de eventos como on() , live() y bind() . Sin embargo, hay algunas diferencias menores que se analizan a continuación.
Método bind(): este método solo adjunta eventos a elementos que existen de antemano, es decir, el estado del documento inicializado antes de que se adjunten los eventos. Si se cumple la condición del selector para un evento posterior, bind() no funcionará en esa función. Tampoco funcionará en el caso de que la condición del selector se elimine del elemento.
- Ejemplo:
<!DOCTYPE html><html><head><!-- CDN for jQuery --><scriptsrc=</script></head><body><divclass="content"><pclass="a">This is Statement 1.</p><script>/* Here, the bind() works on elementsinitialized beforehand only */$(".a").bind("click",function(){$(this).css("color","red");});</script><pclass="a">This is Statement 2.</p><!-- click() method works on Statement1 but not on Statement 2. --></div></body></html> - Salida:
Antes de hacer clic en esas declaraciones:
Después de hacer clic en esas declaraciones:
Método live(): este método adjunta eventos no solo a los elementos existentes, sino también a los que se agregarán en el futuro, pero no funcionará en el caso de que se elimine la condición del selector del elemento.
Nota: El método live() quedó obsoleto en la versión 1.7 de jQuery y se eliminó en la versión 1.9.
- Ejemplo:
<!DOCTYPE html><html><head><!-- Old CDN for .live() to work in jQuery --><scriptsrc=</script></head><body><divclass="content"><pclass="a">This is Statement 1.</p><script>/* live() method works for elementsappended later as well */$(".a").live("click",function(){$(this).css("color","red");});</script><pclass="a">This is Statement 2.</p><!-- live() method works on both Statement1 and Statement 2. --></div></body></html> - Salida:
Antes de hacer clic en esas declaraciones:
Después de hacer clic en esas declaraciones:
Método on(): este método adjunta eventos no solo a los elementos existentes, sino también a los que se agreguen en el futuro. La diferencia aquí entre la función on() y live() es que el método on() todavía es compatible y utiliza un patrón de sintaxis diferente, a diferencia de los dos métodos anteriores.
- Ejemplo:
<!DOCTYPE html><html><head><!-- CDN for jQuery --><scriptsrc=</script></head><body><divclass="content"><pclass="a">This is Statement 1.</p><script>/* Works on all elements within scopeof the document */$(document).on("click",".a",function(){$(this).css("color","red");});</script><pclass="a">This is Statement 2.</p><!-- on() method works on both Statement1 and Statement 2. --></div></body></html> - Salida:
Antes de hacer clic en esas declaraciones:
Después de hacer clic en esas declaraciones:
Diferencias resumidas para los métodos anteriores:
| Propiedad | unir() | En Vivo() | en() |
| Obsoleto | Sí | Sí | No |
| Remoto | No | Sí | No |
| Alcance | Elementos inicializados de antemano | Para el enlace de eventos actuales y futuros | Para el enlace de eventos actuales y futuros |
| Sintaxis: | $([selector]).bind([evento],[función]); | $([selector]).live([evento],[función]); | $(documento).on([evento],[selector],[función]); |
Publicación traducida automáticamente
Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA