Track down what javascript function sets up a click event

Question

I am trying to modify a theme's functionality, but I've ran into a snag.

I need to track down what javascript function is setting up an 'add to cart' button click event, which is using ajax.

This is the page where I am trying to diagnose the issue...

http://www.healthjunkies.com.au/benefits-of-whey-protein/

On the sidebar - when you click a purple add to cart button, it creates a success message that looks all screwed up in the side bar. This is because I copied some of the functionality from another part of the theme, and put it into a sidebar widget.

Now I need to isolate the function that is setting up this call.

I tried using the Chrome developer tools, using the breakpoints and it seems it traces the call between jQuery and some click tracker, I am guessing some analytic plugin.

How do I isolate the function that set the event up in the first place, so I can change the outcome.

Answer 1

There's two ways:

1.) Use Chrome's Search Panel (under Sources) to search for the element that the listener is being registered on (see answer here for guide).

2.) The "Event Listeners" tab under "Elements" .

Answer 2

View page source, line 923-930:

<script type="text/javascript">
jQuery(function($) {

    $( '.add_to_cart_button:not(.product_type_variable, .product_type_grouped)' ).click( function() {
        ga('send', 'event', 'Products', 'Add to Cart', ($(this).data('product_sku')) ? ('SKU: ' + $(this).data('product_sku')) : ('#' + $(this).data('product_id')));
    });

});
</script>

Answer 3

More recent solution is in Chrome > Developer tools > Sources > Event listeners > Mouse > Click

Then browse through the events