如果表行发生更改，则 jQuery 发出警报(内部有 Fiddle)

Question

所以我想做的是，每次表的顶行发生变化时执行警报。问题是，我每 10 秒重新生成一次 HTML - 所以我不知道如何“监听”更改。

http://jsfiddle.net/kYZYU/1/

<table id="theTable">
<th>Id</th>
<th>Name</th>
<th>Score</th>
    <tr>
        <td>1</td>
        <td>James</td>
        <td>50</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Peter</td>
        <td>25</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Sally</td>
        <td>10</td>
    </tr>
</table>


$("#theTable").on("change", function() {
    alert("This person took the lead");
});


//Goal: An alert every time someone new takes the lead. The problem is, at this point - the table HTML is regenerated every 10 seconds (it will be better solution soon), so it's kind of hard to "listen for changes". 

我在想什么:1. 在页面加载时，查看第一个表格行并保存 User Id 的值，下次重新生成 HTML 时，运行比较？

Answer 1

您需要首先将自定义事件绑定(bind)到表:

// table listening to an "update" custom event
$('#leaderboard-spot').on('update', function(){
    alert('Table updated, launching kill space goats sequence now.')
});

当您的 ajax 请求成功并且您的表已更新时，触发表上的自定义事件:

function loadLeaderboard() {
    var competitionId = $("body").attr("data-competitionId");
    var url = "leaderboard_api.php?competitionId=" + competitionId;
    $.get(url, function (data) {
        $("#leaderboard-spot").html(data);
        // manually triggering an update
        $("#leaderboard-spot").trigger('update');
    });
}