Binding events to dynamic elements using jQuery
Adding events to dynamic elements created from JavaScript or jQuery.
Loading page contents after the page load helps your web page to load faster.
In this post, I'm going to show you how to add an event to a dynamic element created using jQuery.
For example, you have a table like this:
HTML
<table id="theTable">
<tr>
<td>
1
</td>
<td>
<button class="TblBtn">
Button 1
</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<button class="TblBtn">
Button 2
</button>
</td>
</tr>
</table>
And you have a jQuery code that adds an event to the button
$('button.TblBtn').click(function(){
alert($(this).text());
});
This works perfeclty.
But what if you need to populate the table after the event has been called?
For example, somewhere on the page you a button that adds a new row to the table:
HTML <button class="AddTblRow">
Add new Row
</button>
JS $('button.AddTblRow').click(function(){
$('#theTable').append(
"<tr>" +
"<td>" +
"3" +
"</td>" +
"<td>" +
"<button class="TblBtn">" +
"Button 3" +
"</button>" +
"</td>" +
"</tr>"
);
});
You will see that when clicking on the button "Alert 3" after the row has been created will not do anything.
Why?
This is because the event was only added to "Button 1" and "Button 2" on page load.
You might be thinking to remove all events of the buttons and call again the "Adding of Event" of the buttons again so that "Button 3" will work.
Like this:
JS $('button.AddTblRow').click(function(){
$('#theTable').append(
"<tr>" +
"<td>" +
"3" +
"</td>" +
"<td>" +
"<button class="TblBtn">" +
"Button 3" +
"</button>" +
"</td>" +
"</tr>"
);
// Add here the event so that Button 3 will also work.
$('button.TblBtn').off().click(function(){
alert($(this).text());
});
});
Note the .off() here. We are telling that all $('button.TblBtn')'s events will be removed. Then add the .click() on all buttons.
While this may work, I really don't recommend it.
It's hard to maintain and it makes the code dirty.
This will also be an issue of performance.
Imagine you have a lot of buttons.
The browser will iterate all of those buttons remove then add events everytime you add a new row.
A better solution would be using Event Delegation.
Rather than adding the event to the Buttons. We add it on the Table and detect if it's a button that they have clicked.
$('#theTable').on('click','button.TblBtn',function(){
alert($(this).text());
});
That's it!!
The browser will only trigger the event when the table is clicked and no more adding and removing of events here.
This will also work for both existing Table Buttons and Dynamically Created buttons.
Here's the final code
HTML
<table id="theTable">
<tr>
<td>
1
</td>
<td>
<button class="TblBtn">
Button 1
</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<button class="TblBtn">
Button 2
</button>
</td>
</tr>
</table>
<button class="AddTblRow">
Add new Row
</button>
JS
// Clicking on table buttons
$('#theTable').on('click','button.TblBtn',function(){
alert($(this).text());
});
// Clicking on Adding new rows to add new rows
$('button.AddTblRow').click(function(){
// Add Dynamic rows
$('#theTable').append(
"<tr>" +
"<td>" +
"3" +
"</td>" +
"<td>" +
"<button class="TblBtn">" +
"Button 3" +
"</button>" +
"</td>" +
"</tr>"
);
});
Replies (0)
Reply