5 formas de eliminar un detector de eventos en jQuery
-
Use jQuery
off()API para eliminar el detector de eventos -
Use jQuery
unbind()API para eliminar el detector de eventos -
Use jQuery
prop()yattr()API para eliminar el detector de eventos - Use la clonación de elementos para eliminar el detector de eventos
-
Use jQuery
undelegate()API para eliminar el detector de eventos
Este artículo le enseña cinco formas que le muestran cómo eliminar un detector de eventos en jQuery. Dependiendo de cómo haya agregado el detector de eventos, puede usar cualquiera de los métodos.
Todos nuestros ejemplos tienen código y comentarios detallados que puede ejecutar en su navegador web.
Use jQuery off() API para eliminar el detector de eventos
jQuery off() API, como su nombre lo indica, eliminará un controlador de eventos del elemento seleccionado. El siguiente código tiene una entrada de formulario que acepta un número entre cero y 10 inclusive.
Cuando un usuario envía el formulario, verificamos si esto es cierto; si no, eliminamos el evento de envío del botón usando la API off(). Al mismo tiempo, deshabilitamos el botón de enviar como señal de que el botón ya no funciona.
Código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-remove-event-listener</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
input[disabled="disabled"]{
cursor: not-allowed;
}
</style>
</head>
<body>
<main>
<form id="form">
<label for="number">Enter a number between 1 and 10:</label>
<input type="number" name="number" id="input-number" required>
<input type="submit" name="submit-form" id="submit-form">
</form>
</main>
<script>
$(document).ready(function(){
$("#form").submit(function(event) {
// Prevent the form from submitting
event.preventDefault();
// Coerce the form input to a number using the
// Number object. Afterward, we perform a basic
// form validation.
let input_number_value = Number($("#input-number").val());
if (typeof(input_number_value) == 'number' &&
input_number_value >= 0 &&
input_number_value <= 10
) {
console.log($("#input-number").val());
} else {
// If the user enters below or above 10,
// we disable the submit button and remove
// the "submit" event listener.
$("#submit-form").attr("disabled", true);
$("#form").off('submit');
console.log("You entered an invalid number. So we've disabled the submit button.")
}
})
})
</script>
</body>
</html>
Producción:
Aún así, en la API off(), puede usarla para eliminar un evento de clic de un elemento dinámico. Creará un elemento de este tipo en función de la interacción del usuario, por ejemplo, un evento de clic.
Al mismo tiempo, puede agregar un evento de clic a este elemento usando $(document).on(). Debido a esto, solo puede eliminar este evento de clic usando $(document).off().
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01_02-jQuery-remove-event-listener</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
width: 50%;
margin: 2em auto;
font-size: 1.2em;
}
main button {
font-size: 1em;
}
.box {
background-color: #1560bd;
width: 100px;
height: 100px;
margin-bottom: 12px;
color: #ffffff;
text-align: center;
padding: 0.2em;
cursor: pointer;
}
[disabled="disabled"]{
cursor: not-allowed;
}
</style>
</head>
<body>
<main>
<div id="div_board">
<p>Click the button to add a div!</p>
</div>
<button id="add_div">Add a Div</button>
</main>
<script>
$(document).ready(function() {
$("#add_div").click(function() {
// Append a new div, then disable the button
// and remove the click event using the ".off()"
// API.
$("#div_board").append("<div class='box'>I am a new DIV. Click me!</div>");
$("#add_div").off('click');
$("#add_div").attr("disabled", true);
});
});
// We attach a dynamic click event to the new div.
// After the user clicks it, we use $(document).off()
// to remove the "click" event. Other techniques like
// "unbind" will not work
$(document).on('click', 'div.box', function() {
alert('You clicked me');
// This will remove the click event because
// we added it using $(document).on
$(document).off('click', 'div.box');
// Tell them why the box can no longer receive a
// click event.
console.log("After clicking the box, we removed the click event. As a result, you can no longer click the box.")
/*This will not work, and the click event will
not get removed
$('div.box').unbind('click');*/
})
</script>
</body>
</html>
Producción:
Use jQuery unbind() API para eliminar el detector de eventos
La API unbind() eliminará todos los controladores de eventos adjuntos a un elemento. Si lo desea, puede pasar el nombre del evento que desea eliminar.
Lo hemos hecho en el siguiente código; eliminamos un evento de clic usando la API unbind(). Esto sucederá si el usuario falla en una verificación implementada en el código.
Esta verificación verifica la cantidad de caracteres para el texto de la imagen alternativa. Si este número no cae entre 20 y 50 caracteres, el código elimina el evento de clic usando la API unbind().
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-remove-event-listener</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
#test-image {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<!-- You can Download the test image from Unsplash:
https://unsplash.com/photos/lsdA8QpWN_A -->
<img id="test-image" src="test-image.jpg" alt="">
</div>
<script>
$(document).ready(function(){
$("#test-image").click(function() {
let image_alt_text = prompt("Enter between 20 and 50 characters for the alt text", "");
if (image_alt_text !== null) {
if (image_alt_text.length >= 20 && image_alt_text.length <= 50) {
if ($("#test-image").attr("alt") === '') {
$("#test-image").attr("alt", image_alt_text);
} else {
console.log("Image already has an alt text.");
}
return
} else {
// User entered an invalid alt text
// Remove the click event using the unbind
// method.
$("#test-image").unbind("click");
// Tell them why they no longer have access to the
// prompt dialog box.
console.log("The dialog box that allows you to enter an alt text is no longer available because you entered an invalid alt text. Thank you.")
}
}
})
});
</script>
</body>
</html>
Producción:
Use jQuery prop() y attr() API para eliminar el detector de eventos
Si el evento de clic en su elemento proviene del atributo onclick(), puede eliminarlo usando la API prop() y attr(). En el siguiente ejemplo, el párrafo tiene un evento onclick() que activa una función.
Después de que la función muestre un mensaje, eliminará el evento de clic configurándolo en nulo.
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>03-jQuery-remove-event-listener</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<p id="big-text" style="font-size: 3em;" onclick="say_thank_you()">I am a very big text! Click me!</p>
<script>
function say_thank_you() {
alert("You clicked me! Good bye!");
// Remove the onclick event handler
$("#big-text").prop("onclick", null).attr("onclick", null);
}
</script>
</body>
</html>
Producción:
Use la clonación de elementos para eliminar el detector de eventos
La clonación de elementos usando jQuery clone() API es otro método para eliminar un detector de eventos. Para comenzar, clone el elemento usando la API clone(); el elemento clonado no tiene el controlador de eventos.
Aún así, solo existe en la memoria, y el elemento original con el controlador de eventos todavía está en la página. Para solucionar esto, usará la API replaceWith() para reemplazar el elemento original con el clon.
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>04-jQuery-remove-event-listener</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
#click-once {
cursor: pointer;
}
</style>
</head>
<body>
<p id="click-once" style="font-size: 3em;">Click for your one-time welcome message.</p>
<script>
$(document).ready(function() {
$("#click-once").click(function() {
alert("Thanks for your visit!");
// Replace the original paragraph with a
// clone. This clone will not have any event
// handler.
let original_paragraph;
let cloned_paragraph;
original_paragraph = $("#click-once");
cloned_paragraph = original_paragraph.clone();
original_paragraph.replaceWith(cloned_paragraph);
// If the user wants the one-time message, tell
// them how to get it back.
console.log("Your one-time message is no longer available. If you want to see it again, reload the page and click the text on the web page.")
})
});
</script>
</body>
</html>
Producción:
Use jQuery undelegate() API para eliminar el detector de eventos
Cuando asigna un evento de clic a un elemento usando el HTML <cuerpo> como proxy, puede usar la API undelegate() para eliminarlo. A continuación, usamos $('body').on('click') para asignar un evento de clic a un elemento que tiene la clase .main.
Como resultado, necesitará la API undelegate() para eliminar el evento de clic.
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>05-jQuery-remove-event-listener</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
main {
background-color: #1a1a1a;
color: #ffffff;
padding: 2em;
height: 50vh;
}
p {
cursor: pointer;
}
</style>
</head>
<body>
<main class="main">
<p>Hello World, click me!</p>
</main>
<script>
$(document).ready(function() {
$('body').on("click", '.main', function() {
alert("Hello and Good Bye!");
// Remove the click event using the
// undelegate() method.
$('body').undelegate('.main', 'click');
})
});
</script>
</body>
</html>
Producción:
-API.webp)
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn