Determine what jQuery script is called when a button is clicked

Question

All, I'm using the following theme on my website: http://revaxarts-themes.com/?t=whitelabel

It's not working the same way on my site so I'm trying to determine what is causing the issue. For example if you click on the Breadcrumb link on the demo and you see Add Numbers breadcrumbs you can see that when you click on things it applies different classes to the previous ones. On my site it doesn't do that so I'm trying to figure out when one of those values are clicked, what JS file is being called.

Another example is if you click on the Forms and then go down to the Multiple Select. When you click the plus icon it transfers over the selection and on my site it doesn't do that. Once again I'd like to figure out what JS file is being called to do that.

I was looking into Firebug which is good to debug if you know the file but I'm not sure how to find out what files are being called. Can anyone point me in the right direction or offer any help on this? I'd greatly appreciate it!

Thanks!

I'm sure they provide basic support in case if you've bought it — zerkms, May 30 '12 at 22:37
@zerkms I believe they do but I still would like to understand how (if at all possible) to determine what files are being called if you're not sure — user1048676, May 30 '12 at 22:38
there is a js debugger in firebug and a lot of documentation on how to use it — zerkms, May 30 '12 at 22:40

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

First, go to this URL http://revaxarts-themes.com/whitelabel/breadcrumb.html (took me a minute to realize it was in an iframe... duh...)

Then run this in your JS console:

clickEvents = $('ul.breadcrumb[data-allownextonly]').data("events").click;
jQuery.each(clickEvents, function(key, value) {
  console.log(value.handler);
})

And this will print the handler for the click event as a function. It is minified, so I unminified for you using jsbeautifier.org

function () {
    var a = c.data("wl_Breadcrumb") || a;
    if (a.disabled) return !1;
    var b = $(this);
    if (!a.allownextonly || 1 >= b.data("id") - c.find("a.active").data("id")) {
        $.fn.wl_Breadcrumb.methods.activate.call(c[0], b), a.onChange.call(c[0], b, b.data("id"));
        return !1
    }
}

Then you're on your own from here...

Source: How to debug Javascript/jQuery event bindings with FireBug (or similar tool)

edited May 23 '17 at 12:20

Community

1
1

answered May 30 '12 at 23:13

Kyle Macey

8,074
2
38
78

Thanks for the information. How did you find the find the minifed click event? When I run it I get one line that says function() and then another line that says [ Object { type="click", origType="click", guid=20, more...} ]. How do I know what function it's calling? Thanks – user1048676 May 31 '12 at 02:05
1

I'm using Chrome console... Don't know if it matters – Kyle Macey May 31 '12 at 02:09
Ok that looks good now in Chrome. When I run it in Chrome I get the following error: TypeError: undefined is not a function When I run the same thing in the demo I get an actual function. Any idea why I would get the TypeError? – user1048676 May 31 '12 at 02:18
You might not have an element with the same selector, which would be a big cause as to why you're not getting the desired effect. Accept this answer then open a new question preferably with a link to your site or a JSFiddle – Kyle Macey May 31 '12 at 05:32

Determine what jQuery script is called when a button is clicked

1 Answers1