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

问题描述

假设：我找到一个带有按钮（'#bigButton'）的页面，当点击时，会导致一个美洲狮（'img＃theLlama'）显示（）使用jQuery。

所以，在button.js中的某个地方（例如第76行）：

  $（'＃bigButton'）。点击（function（）{
 $（'img＃theLlama'）。show（）; 
}）
  

现在我们来看一个包含大量.js文件的HTML页面。我可以点击按钮，看到美洲驼出现，但我不知道上面的代码是什么。

我正在寻找的解决方案与可用于Firebug中的CSS。我想检查该元素，并让它显示这个jQuery发生在buttons.js的第76行，以及该元素上的任何其他绑定。

* >注意：赏金是针对美洲驼问题的具体答案，即指向上述解决方案。 *

FireQuery是许多jQuery任务的一个很好的工具，但似乎没有回答美洲驼问题。如果我错了，请更正我。

解决方案

使用，其内置的Web检查器和

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

在Chrome控制台中， $ 0 是指元素面板中选定的元素。 / p>

输入 $ ._ data（$ 0）会给我们jQuery （内部）数据对象，其中包括事件，就像我们的Firebug示例，可悲的是，Chrome不会让我们点击功能，但它会让我们看到源：

< Broken Screenshot link>

---

a href =http://api.jquery.com/live =nofollow noreferrer> .live（） 事件：

Live事件存储在 $ ._ data（文档，事件）中，并包含一个 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屋！