为什么我的 JS 功能在页面动态添加内容后不起作用？答案

【问题标题】：Why does my JS function not work after dynamically adding content to the page?为什么我的 JS 功能在页面动态添加内容后不起作用？
【发布时间】：2013-03-28 12:34:12
【问题描述】：

我有一个在网页开头定义的 javascript 函数。在我的表格中单击一行时调用它。

这是我的功能：

    $(".info").click(function(){
        alert($(this).attr('movieid'));
    });

这是我的表格行的样子：

<tr class="info" movieid="123"><td>movie title</td></tr>

现在我第一次加载页面时显示了该表，我可以单击该行，它将正确调用该函数。我正在尝试为表实现搜索功能。我有 php 脚本返回表行，就像上面的一样，我将它们添加到表中，但是当我单击从 php 脚本返回的行时，不调用 javascript 函数。有谁知道我怎么能做到这一点？我没有运气。

编辑

这是我获取搜索结果的功能：

$.ajax({
        type: "POST",
        url: "www.mysite.com/core/search.php",
        data: { q: search_string},
        cache: false,
        success: function(html){
            $("table#movies").fadeOut();
            $("div#results-container").fadeIn();
            $("div#results").fadeIn();
            $("div#results").html(html);
        }
});

【问题讨论】：

api.jquery.com/on
你是在使用 AJAX 来获取内容吗..
我正在使用ajax函数来获取内容
我更新了我的问题以包含搜索功能
好的，然后在 api 上使用 jquery .. 正如所有的 ans 所建议的那样......

标签： php javascript html

【解决方案1】：

您正在动态添加元素，因此在设置点击处理程序时它不会被注册。

$("body").on("click", ".info", function(e) {
   ...
});

body 通常可以工作，但理想情况下，您希望 DOM 元素尽可能靠近选择器 .info。

【讨论】：

【解决方案2】：

使用 j Query 就绪事件

$(document).ready(function() {    
    $(".info").on("click", "tr", function(event){
       alert($(this).attr('movieid'));
   });
});

【讨论】：

我认为您不需要.ready，因为无论如何在加载 DOM 之后都会加载新元素。

【解决方案3】：

你必须这样做：

$("body").on("click", "tr", function(event){
    alert($(this).attr('movieid'));
});

通过添加“容器”，会产生类似.live()的效果。

【讨论】：

感谢您的帮助，但是当我添加“表格”部分时，该行没有点击
关于 j query 像这个版本在 j Query 1.7 中被弃用并删除：1.9

【解决方案4】：

在document 上添加.on，因为您要将DOM 添加到文档中。

示例

$(document).on('click',".info",function(){
       alert($(this).attr('movieid'));
});

【讨论】：

【解决方案5】：

您的 php 脚本很可能没有将类添加到表格行。更改它以添加该类。

【讨论】：

我已将类添加到表格行中......它的输出与以前相同

【解决方案6】：

感谢大家的帮助。我能够弄清楚.. @jasen 提到您将其声明为身体标签。这是我能够使用的解决方案：

$("body").on("click", ".info", function(event){
   alert($(this).attr('movieid'));
});

也感谢 Derek。您为未来提供了一些有用的示例。

【讨论】：

【解决方案7】：

首先，指定一个选择器，现在和将来都将包含所有tr.info 节点。根据您对帖子的最新编辑，我相信是table#movies。

然后用on附加事件并指定子选择器tr.info：

$('table#movies').on('click', 'tr.info', function () {
    alert($(this).attr('movie'));
});

查看jsFiddle上的示例

【讨论】：