Ajax 返回的元素不会在 jQuery 中触发

Question

在 HTML 中，ID="project_pick" 的下拉菜单将触发更改事件，将所选值发送到 getallreports.php 文件。这行得通。 PHP 文件执行 MySQL 查找并在一些 HTML 中返回值。这也有效，并且在页面上看起来很棒。下面是将所选项目发送到 PHP 文件的 jQuery/ajax 代码：

$('#project_pick').change(function(e) {
    $.ajax({
        type: "POST",
        url: "getallreports.php",
        data: "project_id=" + $(this).val(),
        success:function(data){
            $('#reportstable').html(data);
        }
    });
});

返回的数据出现在指定的 div 内，并包含具有特定 ID 的锚标记，这些 ID 应该允许其他 JQuery 事件发生。返回的 HTML 片段：

<table><tr>
    <td>Report 1</td><td><a href="#" id="change_1">click to change</a></td>
    <td>Report 2</td><td><a href="#" id="change_2">click to change</a></td>
</tr></table>

上面点击事件触发的jQuery代码是：

$('#change_1').click(function() {
    alert('Change Report One was clicked');
});

但是，单击上面的锚标记没有任何作用。此外，返回的 HTML 甚至不会出现在源代码中——尽管它显示在屏幕和 firebug 中。

我错过了什么？如何触发该点击事件？

编辑：

我被提醒过 .on('click', etc) 事件（感谢 Michael 和 Zirkms），但是当我尝试将它添加到我的代码中时，下拉列表的 .change 事件停止触发。也许下面的代码需要改头换面？

$('#project_pick').on(change(function(e) {
    $.ajax({
        type: "POST",
        url: "getallreports.php",
        data: "project_id=" + $(this).val(),
        success:function(data){
            $('#reportstable').html(data);
        }
    });
});

Answer 1

在$('#test').click() 代码执行的那一刻，#test 在 DOM 中不存在，所以你没有将该处理程序绑定到某个地方。

使用

$(document).on('click', '#test', function() { ... });

改为

或者（更好）如果你有一个特定的节点可以插入检索到的html - 使用一些特定的选择器而不是$(document) like

$('#reportstable').on(...)

甚至没有出现在源代码中

在“查看源代码”中，浏览器通常会根据请求显示来自服务器的响应，而不反映 JS DOM 修改。