Question

我从JSON数据自动填充表，通过$ .getJSON检索。调用

当我点击蚂蚁时，我想显示警告。

这是我的代码。

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

}）;

这是填充tableis后的html片段。

enter image description here

由于某种原因，不会触发行单击。

感谢

Answer 1

您的所有行的ID都是“行”，但您的目标是jQuery中的“行”类。将ID更改为类，它将起作用。

Answer 2

你需要使用event delegation，因为当注册事件处理程序时，所有目标元素都不在dom中，其中一些是动态创建的。

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

JQuery onClick自动生成的表无法正常工作

2 个答案: