Difficulties debugging event handlers applied by CSS selectors
Hi everyone,
I've got a fairly deep issue with jQuery and I'm struggling to find a
good way of resolving it. In short, it comes down to the use of CSS
selectors for applying event handlers.
CSS selectors are a really powerful way of selecting a number of HTML
elements to apply an event handler to, but they can be difficult to
debug, because they are implicit. This means that if you have a
button / link / whatever, it's difficult to find the code that is
triggered by an event, such as a onclick handler.
If you are stepping into a piece of code that you didn't write
yourself, and you're trying to identify which method is responsible
for handing the click event of a given button, you have to read
through all of the selector rules and mentally work out which one
would apply.
As we all know CSS selectors are used when developing CSS :-). In
this case, Firebug is an invaluable debugging tool, because you can
click on an DOM element and see which rules have actually matched to
that DOM element.
Is there any way of doing this kind of debugging in jQuery? Or are
there other solutions to this debuggability problem? Perhaps I'm
structuring my code in an inappropriate way?
This issue arose because I wrote a piece of code that others have had
trouble working with. For reference, the code in question is
available at: http://svn.silverstripe.com/open/modules/cms/trunk/javascript/ModelAdmin.js