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

在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的锚标记,这些标记应允许发生其他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>

在上述click事件上触发的jQuery代码是：

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

但是,单击上面的锚标记不会执行任何操作.而且,返回的HTML甚至不会出现在源代码中-尽管它会显示在屏幕和萤火虫中.

我想念什么？如何触发该点击事件？

编辑：

我已经想起了.on(‘click’等)事件(感谢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);
        }
    });
});

解决方法:

在$(‘#test’).click()代码执行的那一刻,#test在DOM中不存在,因此您没有将该处理程序绑定到某个地方.

采用

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

代替

或者(更好),如果您在插入检索到的html的特定节点上-使用某些特定的选择器,而不是像$(document)

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

does not even appear in the source

在“查看源代码”中,浏览器通常在请求时检索服务器的响应,而不反映JS DOM修改.

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

相关文章