En este artículo, aprenderemos cómo agregar otro párrafo al documento cuando se hace clic en un párrafo usando jQuery.
Enfoque: Usaremos los métodos delegado() y after() de jQuery. El método delegado() se usa para agregar detectores de eventos al elemento dado. Esto se usará para agregar un detector de eventos de clic al elemento de párrafo. Este método toma tres parámetros, en nuestro caso, el selector de niños es el elemento de párrafo, el evento es «clic» y la función es una función anónima.
La función de devolución de llamada anónima se utiliza para agregar un nuevo párrafo al documento. Esto se hace usando el método after() que inserta el elemento dado después del elemento seleccionado en el documento. Insertaremos un nuevo elemento de párrafo después del actual utilizando este enlace como selector. Por lo tanto, esto agregará un elemento de párrafo al documento después del que se hizo clic. También podemos agregar una variable de contador para ver esto en efecto.
Sintaxis:
$(selector).delegate("target_elem", function() {
$(this).after("content");
})
El siguiente ejemplo demuestra este enfoque.
Ejemplo:
HTML
<html>
<head>
<style>
p {
background: green;
color: white;
padding: 5px;
}
</style>
<!--Include the jQuery library-->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<p>
Click on the paragraphs to start
adding new paragraphs
</p>
<script>
// A count variable to keep track
// of the current paragraph
let cnt = 0;
// Add the click event listener to
// the required paragraph element
$("body").delegate("p", "click",
function() {
// Insert a new paragraph after
// this paragraph
$(this).after(
"<p>New paragraph " +
cnt + "</p>
");
cnt++;
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por code_blooded7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA