Los cambios en el html/texto de un div se pueden detectar utilizando el método jQuery on() . on() se usa para adjuntar uno o más controladores de eventos para los elementos seleccionados y los elementos secundarios en el árbol DOM. El método on() es el reemplazo del método bind(), live() y delegado() de la versión 1.7 de jQuery.
Sintaxis:
$(selector).on(event, childSelector, data, function, map)
Ejemplo 1: este ejemplo utiliza el método jQuery on() para cambiar el texto del elemento <div>.
<!DOCTYPE html> <html> <head> <title> How to detect and change the content of a div using JQuery ? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <style> #div1 { font-size: 35px; color:green; text-align:center; } </style> <script> $(document).ready(function(){ $("div").on("click", function(){ document.getElementById("div1").innerHTML = "A computer science portal for geeks"; }); }); </script> </head> <body> <div id="div1">GeeksforGeeks!</div> </body> </html>
Producción:
- Antes de hacer clic en el elemento div:
- Después de hacer clic en el elemento div:
Ejemplo 2: Este ejemplo usa el método jQuery on() para cambiar el estilo de un elemento <div>.
<!DOCTYPE html> <html> <head> <title> How to detect and change the style of a div using JQuery? </title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <style> #div1 { font-size: 35px; color:green; text-align:center; } </style> <script> $(document).ready(function(){ $("div").on("click", function(){ document.getElementById("div1").style.color = "white"; document.getElementById("div1").style.backgroundColor = "green"; }); }); </script> </head> <body> <div id="div1">Welcome to GeeksforGeeks!!!</div> </body> </html>
Producción:
- Antes de hacer clic en el elemento div:
- Después de hacer clic en el elemento div:
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA