0

I am auto populating a table from JSON data that a retrieve via $.getJSON. call.

when i click ant i want to show an alert.

this is my code.

<body>
    <div id="container">

        <div id="header">
            <img id="titleimage" border="0" src="images/title.png">
        </div>

        <div id="sub-container">
            <div id ="video_container">
                <h1>HTML5 local video file player example</h1>
                <div id="message"></div>
                <input type="file" accept="video/*"/>
                <video id="match_video" controls autoplay></video>
            </div>
            <div id="log_container">
                <table id="chart"class="masterTooltip" title="RaboPro12 League Table">
                    <tr>
                        <th>Time</th>
                        <th>Event</th>
                        <th>Name</th>
                    </tr>
                </table>
            </div>
            <div id="stats_container"></div>
        </div>

    </div>
</body>

JQuery

$(document).ready(function() {

$.getJSON("php/getLog.php", function(result) {
    //var data = $.parseJSON(result);

    $.each(result, function(i, obj) {
        var fname = obj.first_name;
        var sname = obj.surname;
        var allName = fname + " " + sname;
        var time = obj.time;
        var event = obj.event;
        $('<tr id ="row"></tr').html('<td>' + time + '</td><td>' + event + '</td><td>' + allName + '</td>)').appendTo('#chart');
    });
}); 

$('.row').click(function() {
    alert("row clicked");
});

});

here is snippet of html after tableis populated.

enter image description here

the row click is not triggered for some reason.

thanks

2 Answers 2

2

All of your rows have an ID of "row" yet you are targeting a class of "row" in your jQuery. Change the IDs to classes and it will work.

1
  • @ChrisMowbray Happens to the best of us.
    – user3290988
    Feb 28, 2014 at 1:04
1

You need to use event delegation because when the event handler is registered all the target elements are not there in the dom, some of them are created dynamically.

$(document).on('click', '.row', function () {
    alert("row clicked");
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.