Question

我有一个jquery代码，它位于一个在iframe中加载的HTML页面内的$（document）.ready（）调用中，并且它正常工作，直到从删除表条目的同一页面调用另一个函数。然后表重新加载仍然在同一页面内，但现在单击处理程序选择表行并突出显示它不会工作。

此代码突出显示表中一行以查找在该行上执行的函数（在这种情况下，问题仅在删除行时发生，因为它是唯一一个不重定向页面的函数，需要页面在重新加载后重新加载返回）

在窗口的初始加载中，单击处理程序正常工作，将突出显示或取消突出显示我想要的任何行。但是当我使用该函数删除行时问题发生了。以下是高亮功能的代码：

$("tr[id*='report']").on("click",function(){
    if(!$(this).hasClass("highlighted")){
        $("#reports tr").removeClass("highlighted");
        $(this).addClass("highlighted");
    }
    else{
        $(this).removeClass("highlighted");
    }
});

使用来自父网页的函数调用删除行后，该页面首先调用用于创建表的相同函数，以使用新行重新创建表，但现在高亮显示的单击处理程序不会不行。但是删除，编辑或添加按钮的其他单击处理程序仍然有效。

这是使用编辑按钮编辑所选报告的处理程序，它位于同一个$（document）.ready（）函数内，位于高亮函数调用的正下方。

$("#edit").click(function(){
    if($("tr").hasClass("highlighted"))
    {
        openReport(helper);
    }
    else
    {
         alert("Please select a report to edit");
    }
});

此按钮的侦听器仍然有效，而同一范围内的高亮显示功能则不然。突出显示的监听器会在chrome的开发工具事件监听器部分中列出。

我不确定这是否是由我本人就绪函数中的范围问题引起的，或者我是否遗漏了某些内容。任何想法或解决方案都会很棒。

如果需要更多信息，请随时告诉我。

Answer 1

读：

...直到从删除表条目的同一页面调用另一个函数。然后表重新加载仍然在同一页面内，但现在单击处理程序选择表行并突出显示它不会工作。

据我所知，您的问题可能是event-binding-on-dynamically-created-elements。

所以我建议将你的功能改为：

$(document).on("click", "tr[id*='report']", function(e) {
    if(!$(this).hasClass("highlighted")){
        $("#reports tr").removeClass("highlighted");
        $(this).addClass("highlighted");
    }
    else{
        $(this).removeClass("highlighted");
    }
});

有人可以解释为什么我的jquery点击处理程序停止工作吗？

1 个答案: