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