How to add event on dynamically created table element inside iframe
Question
I have an HTML code like this
<table id="Table1">
<tbody>
<tr>
<th scope="col">
Srno.
</th>
<th scope="col">
Emp code
</th>
<th scope="col">
Name
</th>
<th scope="col">
Mobile No
</th>
<th scope="col">
Delete
</th>
</tr>
</tbody>
</table>
I have a button and when the button is clicked the the new tr with 4 td added into table, the code become like this.
<table id="Table1">
<tbody>
<tr>
<th scope="col">
Srno.
</th>
<th scope="col">
Emp code
</th>
<th scope="col">
Name
</th>
<th scope="col">
Mobile No
</th>
<th scope="col">
Delete
</th>
</tr>
<tr>
<td>
1
</td>
<td style="display: none;">
198
</td>
<td>
SHR003
</td>
<td>
Saurabh khandelwal
</td>
<td>
9891491920
</td>
<td>
<img class="clsImage" src="../../images/delete1.png" style="cursor: pointer;">
</td>
</tr>
</tbody>
</table>
Now i used delete image to delete current row which is dynamically added in iframe .For same am using that Jquery code :
$("iframe").contents().find('body').on("click", '.clsImage', function (e) {
alert('111');
});
But after click on delete image button the newest added tr inside the iframe is not gives alert .
I am using `Jquery 1.9.1'
Please help me
1 answers
solution1
0 2014-10-03 09:38:56
Maybe the issue is that you are trying to bind the click event to elements inside the iframe before it has finished to load. You can try to bind the event handler after the iframe has loaded:
$('iframe').load(function () {
$(this).contents().find('body').on('click', '.clsImage', function () {
alert('111');
});
});
EDIT: This is a simple example of what I mean. You need to give enough time to the iframe to build its own DOM before you can register any handler.
This is the content of index.html :
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function() {
$('iframe').load(function () {
$(this).contents().find('body').on('click', '.clsImage', function () {
alert('111');
});
});
$('button').click(function () {
var $table = $('iframe').contents().find('table');
$table.append('<tr><td>1</td><td style="display: none">198</td><td>SHR003</td><td>Saurabh khandelwal</td><td>9891491920</td><td><img class="clsImage" src="../../images/delete1.png" style="cursor: pointer;"></td></tr>');
});
});
</script>
</head>
<body>
<button>add</button>
<iframe src="table.html"></iframe>
</body>
</html>
This is the content of table.html :
<table id="Table1">
<tbody>
<tr>
<th scope="col">
Srno.
</th>
<th scope="col">
Emp code
</th>
<th scope="col">
Name
</th>
<th scope="col">
Mobile No
</th>
<th scope="col">
Delete
</th>
</tr>
</tbody>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.