Cuando queremos vincular cualquier evento a un elemento, normalmente podemos vincular directamente cualquier evento de cada elemento usando el método on() .
Ejemplo 1: Este ejemplo usa el método jQuery on() para agregar un elemento de párrafo dinámicamente.
<!DOCTYPE html>
<html>
<head>
<title>
How to handle events in dynamically
created elements in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#list li").on("click", function (event) {
$('#list').append('<li>New Paragraph</li>');
});
});
</script>
<style>
li {
font-size: 30px;
width: 400px;
padding: 20px;
color: green;
}
</style>
</head>
<body>
<!-- Click on this paragraph -->
<ul id="list">
<li>Click here to append !!!</li>
</ul>
</body>
</html>
Producción:
Esto funciona muy bien, pero cuando agregamos un nuevo elemento de la lista y hacemos clic en él, no sucede nada. Esto se debe al controlador de eventos adjunto antes del cual se ejecuta cuando se carga el documento. En ese momento solo existía el primer elemento de la lista y no los nuevos. Por lo tanto, el método .on() se aplicó solo para el primer elemento de la lista y no para el resto.
Ejemplo 2: El siguiente ejemplo se implementa usando el método on() .
<!DOCTYPE html>
<html>
<head>
<title>
How to handle events in dynamically
created elements in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#list").on("click",
"li", function (event) {
$('#list').append(
'<li>New Paragraph</li>');
});
});
</script>
<style>
li {
font-size: 30px;
width: 400px;
padding: 20px;
color: green;
}
</style>
</head>
<body>
<ul id="list">
<!-- Click on this item -->
<li>Click here to check on()!!!</li>
</ul>
</body>
</html>
Producción:
Ejemplo 3: El siguiente ejemplo se implementa usando la función delegar() . Para vincular el controlador de eventos a elementos creados dinámicamente, usaremos Event Delegation . Al hacer clic en los nuevos elementos de la lista, se realiza la misma acción.
La delegación de eventos es el proceso que nos permite adjuntar un solo detector de eventos al elemento principal y se activará para todos los elementos secundarios que existen ahora o que se agregarán en el futuro. Tanto las funciones on() como delegar() nos permiten delegar eventos.
<!DOCTYPE html>
<html>
<head>
<title>
How to handle events in dynamically
created elements in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("#list").delegate("li",
"click", function (event) {
$('#list').append(
'<li>New Paragraph</li>');
});
});
</script>
<style>
li {
font-size: 30px;
width: 400px;
padding: 20px;
color: green;
}
</style>
</head>
<body>
<ul id="list">
<!-- Click on this item -->
<li>Click to check delegate !!!</li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayaliparulekar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA