2013-06-26 55 views
3

使用Chrome開發者工具,看看聽衆是什麼節點上給我找麻煩。它似乎沒有檢測到我的動態加載內容中的監聽器(不過,不幸的是我沒有在小提琴中重現這一點)。但是,它不會註冊由jQuery委派的事件。聽衆可以在Chrome窗格中選擇事件被刷新

有什麼辦法,我可以「刷新」,其「事件的知識」?

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); 
}); 

FIDDLE

回答

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

它確實列出的事件,請body

的方式添加事件監聽器是將它添加到身體,只有觸發聽者當源elment是DIV。

正如你在圖片中看到的設置「中選擇的節點只有」當

enter image description here

使用下面的代碼如下:

<!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追加我沒有看到的事件上市。我使用的版本27.0.1453.116 M於Windows 7的