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');
    });
});

• javascript
• jquery
• html
• mysql

• 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 2

Please 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.