Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to bind jQuery events within dynamic content returned via Ajax?
To bind jQuery events within dynamic content, use event delegation. Event delegation allows you to attach events to elements that don't exist yet in the DOM, which is essential when working with content loaded dynamically via Ajax.
The key is to bind events to a parent element that already exists (like document) and specify the target selector as the second parameter. This way, when new elements are added dynamically, they will automatically respond to the events.
Event Delegation Syntax
Use the following syntax for event delegation ?
$(document).on('event', 'selector', function() {
// Event handler code
});
Example
You can try to run the following code to learn how to bind jQuery events within dynamic content returned via Ajax ?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".loadingAjax").on("click", function(event) {
event.preventDefault();
var appendedContainer = $(".append");
// Simulate Ajax response by adding dynamic content
appendedContainer.hide();
appendedContainer.append("<a href='#' class='link'>Hi, I'm dynamically added!</a><br>");
appendedContainer.append("<button class='dynamic-btn'>Click me too!</button>");
appendedContainer.fadeIn();
});
// Event delegation for dynamically added links
$(document).on("click", '.link', function(event) {
event.preventDefault();
alert("Dynamic link clicked!");
});
// Event delegation for dynamically added buttons
$(document).on("click", '.dynamic-btn', function() {
alert("Dynamic button clicked!");
});
});
</script>
<style type="text/css">
body {
font-family: sans-serif;
padding: 20px;
}
.loadingAjax {
font-weight: bold;
text-decoration: none;
background: #007cba;
color: white;
padding: 10px;
border-radius: 4px;
}
.append {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
.dynamic-btn {
margin-left: 10px;
padding: 5px 10px;
}
</style>
</head>
<body>
<a class="loadingAjax" href="#">Click to load dynamic content</a>
<div class="append"></div>
</body>
</html>
In this example, the events are bound to $(document) using the .on() method with event delegation. This ensures that even elements added after the page loads will respond to click events. The dynamic content is added when you click the "Click to load dynamic content" link, and both the dynamically added link and button will be clickable.
Conclusion
Event delegation is essential for handling events on dynamic content in jQuery. By binding events to a parent element that exists when the page loads, you ensure that dynamically added elements will automatically inherit the event handlers.
818 Views
