admin管理员组文章数量:1342504
I am downloading a table from a remote database but when I do this I am having an issue implementing a double click function on the rows in the table. I am able to do the double click function on the whole table though using just the id for the table like this $('#t01').dblclick(function(){
. I think it is because I am generating the html text for the table on the server side. I tried using the function on the EditTable that I created fully on the client side and it worked fine. Has anyone any idea how I could get around this? Any help would be greatly appreciated!
html code:
<section class="main-section" id="service"><!--main-section-start-->
<div class="container">
<h2>Mapping</h2>
<div data-role="content">
<table id="t01">
</table>
<br>
<br>
<button data-role="button" id="upload">Upload</button>
<table id="EditTable">
<tr>
<td>1</td><td>One</td>
</tr>
<tr>
<td>2</td><td>Two</td>
</tr>
</table>
</div>
</div>
</section>
JavaScript code:
var trackID = new Array();
function onBodyLoad() {
$.ajax({
type: 'GET',
url: 'http://ec2*******************pute.amazonaws/downloadAdmin.php',
success: function (data) {
// document.getElementById("tblDiv").innerHTML = data;
var trackID=data.split(" ") ;
//alert(data);
printDatabase(trackID);
}
});
}
function printDatabase(trackID){
var tblText='<table style="width:100%"><tr><th style="text-align:center">Recent Journeys</th></tr>';
var len = trackID.length;
for (var i = 0; i < len; i++) {
tblText +='<tr id="\''+trackID[i]+'\'"><td style="text-align:center">'
+ trackID[i] +'</td></tr>';
}
tblText +="</table>";
document.getElementById("t01").innerHTML =tblText;
}
$(document).ready(function() {
$('#t01 tr').dblclick(function(){
alert('Row dblclicked');
});
});
I am downloading a table from a remote database but when I do this I am having an issue implementing a double click function on the rows in the table. I am able to do the double click function on the whole table though using just the id for the table like this $('#t01').dblclick(function(){
. I think it is because I am generating the html text for the table on the server side. I tried using the function on the EditTable that I created fully on the client side and it worked fine. Has anyone any idea how I could get around this? Any help would be greatly appreciated!
html code:
<section class="main-section" id="service"><!--main-section-start-->
<div class="container">
<h2>Mapping</h2>
<div data-role="content">
<table id="t01">
</table>
<br>
<br>
<button data-role="button" id="upload">Upload</button>
<table id="EditTable">
<tr>
<td>1</td><td>One</td>
</tr>
<tr>
<td>2</td><td>Two</td>
</tr>
</table>
</div>
</div>
</section>
JavaScript code:
var trackID = new Array();
function onBodyLoad() {
$.ajax({
type: 'GET',
url: 'http://ec2*******************pute.amazonaws./downloadAdmin.php',
success: function (data) {
// document.getElementById("tblDiv").innerHTML = data;
var trackID=data.split(" ") ;
//alert(data);
printDatabase(trackID);
}
});
}
function printDatabase(trackID){
var tblText='<table style="width:100%"><tr><th style="text-align:center">Recent Journeys</th></tr>';
var len = trackID.length;
for (var i = 0; i < len; i++) {
tblText +='<tr id="\''+trackID[i]+'\'"><td style="text-align:center">'
+ trackID[i] +'</td></tr>';
}
tblText +="</table>";
document.getElementById("t01").innerHTML =tblText;
}
$(document).ready(function() {
$('#t01 tr').dblclick(function(){
alert('Row dblclicked');
});
});
Share
edited Jun 10, 2020 at 18:58
Stop War
5747 silver badges24 bronze badges
asked Mar 15, 2016 at 19:43
AntonioAntonio
2252 silver badges12 bronze badges
1
- 1 You're linking the function on elements that don't exist on $(document).ready. It should work when you use $('#t01 tr').dblclick(function() after printDatabase() is finished. – Crack_David Commented Mar 15, 2016 at 19:49
2 Answers
Reset to default 7Please replace
$('#t01 tr').dblclick(function(){
alert('Row dblclicked');
});
With
$(document).on("dblclick","#t01 tr",function() {
alert('Row dblclicked');
});
To capture events on elements which are created AFTER declaring your event listeners - you should bind to a parent element, or element higher in the hierarchy. Your table is created dynamically after the page is done loading and jQuery doesn't know about it.
Make sure your code for initialization of the double click happens AFTER the elements have been created. It's not enough that it's after body load - your AJAX still hasn't returned at that point.
Put the
$('#t01 tr').dblclick(function(){
alert('Row dblclicked');
});
after the PrintDatabase() function call in your AJAX success function.
本文标签: javascriptjQuery double click not working on table rowStack Overflow
版权声明:本文标题:javascript - jQuery double click not working on table row - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1743691953a2522855.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论