5 Möglichkeiten zum Entfernen eines Ereignis-Listeners in jQuery
-
Verwenden Sie die jQuery
off()-API, um den Ereignis-Listener zu entfernen -
Verwenden Sie die jQuery
unbind()-API, um den Ereignis-Listener zu entfernen -
Verwenden Sie die APIs
prop()undattr()von jQuery, um den Ereignis-Listener zu entfernen - Verwenden Sie Klonen von Elementen, um den Ereignis-Listener zu entfernen
-
Verwenden Sie die jQuery
undelegate()-API, um den Ereignis-Listener zu entfernen
In diesem Artikel lernen Sie fünf Methoden kennen, die Ihnen zeigen, wie Sie einen Ereignis-Listener in jQuery entfernen. Je nachdem, wie Sie den Ereignis-Listener hinzugefügt haben, können Sie jede der Methoden verwenden.
Alle unsere Beispiele enthalten Code und detaillierte Kommentare, die Sie in Ihrem Webbrowser ausführen können.
Verwenden Sie die jQuery off()-API, um den Ereignis-Listener zu entfernen
jQuery off() API entfernt, wie der Name schon sagt, einen Event-Handler aus dem ausgewählten Element. Der folgende Code hat eine Formulareingabe, die eine Zahl zwischen null und einschließlich 10 akzeptiert.
Wenn ein Benutzer das Formular absendet, prüfen wir, ob dies der Fall ist; wenn nicht, entfernen wir das Button-Submit-Event mit der off()-API. Gleichzeitig deaktivieren wir den Submit-Button als Zeichen dafür, dass der Button nicht mehr funktioniert.
Code:
<!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>
Ausgang:
Auf der off()-API können Sie sie dennoch verwenden, um ein Klickereignis von einem dynamischen Element zu entfernen. Sie erstellen ein solches Element basierend auf einer Benutzerinteraktion, z. B. einem Klickereignis.
Gleichzeitig könnten Sie diesem Element mit $(document).on() ein Click-Event hinzufügen. Aus diesem Grund können Sie dieses Click-Event nur mit $(document).off() entfernen.
Codebeispiel:
<!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>
Ausgang:
Verwenden Sie die jQuery unbind()-API, um den Ereignis-Listener zu entfernen
Die unbind()-API entfernt alle Event-Handler, die an ein Element angehängt sind. Wenn Sie möchten, können Sie den Namen des Ereignisses übergeben, das Sie entfernen möchten.
Das haben wir im folgenden Code getan; Wir entfernen ein Klickereignis mit der unbind()-API. Dies geschieht, wenn der Benutzer eine im Code implementierte Überprüfung nicht besteht.
Diese Überprüfung überprüft die Anzahl der Zeichen für den alternativen Bildtext. Wenn diese Zahl nicht zwischen 20 und 50 Zeichen liegt, entfernt der Code das Klickereignis mithilfe der unbind()-API.
Codebeispiel:
<!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>
Ausgang:
Verwenden Sie die APIs prop() und attr() von jQuery, um den Ereignis-Listener zu entfernen
Wenn das Klickereignis auf Ihrem Element vom Attribut onclick() stammt, können Sie es mit der API prop() und attr() entfernen. Im folgenden Beispiel hat der Absatz ein onclick()-Ereignis, das eine Funktion aktiviert.
Nachdem die Funktion eine Meldung anzeigt, entfernt sie das Click-Event, indem sie es auf null setzt.
Codebeispiel:
<!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>
Ausgang:
Verwenden Sie Klonen von Elementen, um den Ereignis-Listener zu entfernen
Das Klonen von Elementen mit der jQuery clone()-API ist eine weitere Methode zum Entfernen eines Ereignis-Listeners. Klonen Sie zunächst das Element mit der clone()-API; Das geklonte Element hat keinen Ereignishandler.
Dennoch existiert es nur im Speicher, und das ursprüngliche Element mit dem Event-Handler befindet sich immer noch auf der Seite. Um dies zu beheben, verwenden Sie die replaceWith()-API, um das ursprüngliche Element durch den Klon zu ersetzen.
Codebeispiel:
<!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>
Ausgang:
Verwenden Sie die jQuery undelegate()-API, um den Ereignis-Listener zu entfernen
Wenn Sie einem Element ein Click-Event zuweisen, indem Sie den HTML-Code <body> als Proxy verwenden, können Sie die undelegate()-API verwenden, um es zu entfernen. Im Folgenden verwenden wir $('body').on('click'), um einem Element der Klasse .main ein Click-Event zuzuweisen.
Daher benötigen Sie die undelegate()-API, um das Click-Event zu entfernen.
Codebeispiel:
<!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>
Ausgang:
-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