Question

我有一个在我的网页开头定义的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);
        }
});

Answer 1

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

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

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

Answer 2

你必须这样做：

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

通过添加＆＃34;容器＆＃34;，它会产生类似.live()的效果。

Answer 3

使用j Query ready事件

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

Answer 4

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

示例

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

Answer 5

您的php脚本很可能不会将类添加到表行。改变它以添加该类。

Answer 6

感谢你们所有人的帮助。我能够弄清楚.. @jasen提到你要将它声明为身体标签。这是我能够使用的解决方案：

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

谢谢Derek ..你提供了一些有用的未来例子。

Answer 7

首先，指定一个选择器，其中包含所有tr.info节点，现在和将来。根据您对帖子的最新修改，我认为是table#movies。

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

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

请参阅jsFiddle

上的示例

为什么在向页面动态添加内容后，我的JS功能无法正常工作？

7 个答案: