jQuery double click not working on table row

Question

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*******************compute.amazonaws.com/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');
    });
});

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
– Crack_David, Commented Mar 15, 2016 at 19:49

Souvik Ghosh · Accepted Answer · 2016-03-15 19:51:06Z

7

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.

answered Mar 15, 2016 at 19:51

Souvik Ghosh

7619 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Antonio Over a year ago

Yeah that worked! Spent ages trying to find that online, cheers thanks for that :)

Juan Carlos Oropeza · Accepted Answer · 2016-03-15 20:07:20Z

6

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.

edited Mar 15, 2016 at 20:07

Juan Carlos Oropeza

48.4k14 gold badges87 silver badges128 bronze badges

answered Mar 15, 2016 at 19:48

tempranova

9379 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery double click not working on table row

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related