检查元素以调查 jQuery 事件绑定 [英] Inspect an element to investigate jQuery event bindings

问题描述

假设:我发现一个带有按钮 ('#bigButton') 的页面，当单击该按钮时，会导致美洲驼 ('img#theLlama') 使用 jQuery 显示().

所以，buttons.js 中的某处(比如第 76 行):

$('#bigButton').click(function(){$('img#theLlama').show();})

现在，假设我有一个包含大量 .js 文件的大 HTML 页面.我可以点击按钮，看到美洲驼出现，但我不知道上面的代码在哪里.

我正在寻找的解决方案与 Firebug 中的 CSS 提供的解决方案非常相似.我想检查元素并让它告诉我这个 jQuery 出现在 button.js 的第 76 行，以及这个元素上的任何其他绑定.

*注意:赏金是针对美洲驼问题"的特定答案，即指向上述解决方案.*

FireQuery 是许多 jQuery 任务的绝佳工具，但它似乎无法回答 llama 问题.如果我对此有错误，请纠正我.

解决方案

使用 ，其内置的网络检查器和

单击元素检查器中的按钮，然后按 Escape 打开 JS 控制台:

在 Chrome 控制台中，$0 指的是元素面板中的选定元素.

输入 $._data( $0 ) 将为我们提供包含事件的 jQuery(内部)数据对象，就像在我们的 Firebug 示例中一样，遗憾的是，Chrome 不会让我们点击该功能，但它会让我们看到源代码:

<断开的屏幕截图链接>

<小时>

关于.live() 事件的说明:

实时事件存储在 $._data( document, "events" ) 上，并包含一个指向函数的 origHandler:

<截图链接失效>

Hypothetical: I find a page with a button ('#bigButton'), that when clicked causes a llama ('img#theLlama') to show() using jQuery.

So, somewhere (say, Line 76) in buttons.js:

$('#bigButton').click(function(){
$('img#theLlama').show();
})

Now, let's say I have a big HTML page with a whole bunch of .js files included. I can click on the button and see the llama appear, but I have no idea where the code above is.

The solution I am looking for is very similar to that which is available with CSS in Firebug. I want to inspect the element and have it show me that this jQuery occurs in Line 76 of buttons.js, along with any other bindings on this element.

*Note: The bounty is for a specific answer to the 'llama question,' ie pointing to a the solution that is described above. *

FireQuery is a great tool for many jQuery tasks, but it does not seem to answer the llama question. If I am wrong about this, please correct me.

解决方案

Using Firebug, FireQuery and this fiddle:

Hitting Cmd+Shift+C (Inspect Element) and clicking on the button reveals this:

Clicking on the events Object {click= } reveals this (after expanding some info)

And clicking on the function() reveals this:

Which should be the code you are looking for, right?

As a note, Firebug can't always find the exact line of code something came from. I've had this method fail completely! Another approach is to use named function expressions. Changing the code to:

$('#bigButton').click(function showMyLlama(){
  $('img#theLlama').show();
})

Now reveals this when inspecting the events object:

Which is way more useful than just function() as it is now obvious that this handler shows us a llama. You can also now search the code for the function name and find it!

---

Using Chrome, its built in web inspector and this fiddle:

Hitting Cmd+Shift+C (Inspect Element) and clicking on the button shows this:

Clicking on the button in the elements inspector then pressing Escape to open the JS Console:

In the Chrome Console, $0 refers to the selected element in the elements panel.

Typing in $._data( $0 ) will give us the jQuery (internal) data object which includes events, just like in our Firebug example, sadly, Chrome wont let us click on the function, but it will let us see the source:

<Broken Screenshot link>

---

A note about .live() events:

Live Events are stored on $._data( document, "events" ) and contain an origHandler that points at the function:

<Broken screenshot link>

这篇关于检查元素以调查 jQuery 事件绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！