3

使用 chrome 开发工具查看节点上的侦听器给我带来了麻烦。似乎它没有在我的动态加载的内容上检测到侦听器（但不幸的是，我没有在小提琴中复制它）。但是，它不会注册由 jQuery 委托的事件。

有什么办法可以“刷新”它的“事件知识”？

var div = document.getElementsByTagName("div")[0],
    p = document.getElementsByTagName("p")[0],
    vanillaListen = function () {
        console.log("clicked via just JS");
    };
//attach pure JS listener
//shows up in Event Listeners pane
p.addEventListener("click", vanillaListen);

//attach jquery listener
$("body").on("mouseover", "div", function () {
    console.log("div mouse'd over via jQuery"); //does not show up in Event Listeners pane
});

//attach listener from ajax loaded content
$(document).ready(function () {
    setTimeout(function () {

        $.ajax({
            type: "post",
            url: "/echo/html/",
            dataType: "html",
            data: {
                html: "<p onClick=\"alert('ajax attached inline event')\">dynamic &lt;p&gt;</p>",
                delay: 1
            },
            success: function (returnedData) {
                //inline onClick shows up in Event Listeners pane
                $("body").append(returnedData);
            }
        });
    }, 2000);
});

小提琴

4

1 回答 1

2 
$("body").on("mouseover", "div",

它确实列出了事件，请查看body。

添加事件侦听器的方式是将其添加到正文中，并且仅当源元素为 div 时才触发您的侦听器。

如下图所示，在设置“仅选定节点”时

在此处输入图像描述

使用以下代码：

<!DOCTYPE html>
<html>
 <head>
<title>test</title>
     <script type="text/javascript" src="jquery-1.9.0.js"></script>
</head> 
 <body> 
    <div>add event listener to body but trigger only when it came from a div</div>
     <script type="text/javascript">
$("body").append("<p onClick=\"alert('ajax attached inline event')\">dynamic</p>");
$("body").on("customEvent", "div", function () {
    console.log("div mouse'd over via jQuery"); //does not show up in Event Listeners pane
});
     </script>
 </body>
</html>

使用 jQuery append 添加内容时，我确实看到了列出的事件。我在 Windows 7 上使用版本 27.0.1453.116 m

于 2013-06-26T02:21:25.080 回答