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.

Chrome developer js trace response

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

mattsven · Accepted Answer · 2015-02-07 13:43:32Z

3

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).

enter image description here

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

enter image description here

edited Feb 7, 2015 at 13:43

answered Feb 7, 2015 at 13:38

mattsven

23.5k11 gold badges73 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dale Woods Over a year ago

The first step I think is what I needed. I was looking for the global script search but couldn't work out how to get it up. I did try the second method, but it only displayed the jQuery functionality that was ready to accept the call.

Dale Woods Over a year ago

It did help Matt, thank you. It is actually one of the woo commerce core files - which I don't want to edit directly. I am just trying to think of a way to work around it. Maybe copy the function that sets it up, assign it to another button class and make it act differently.

mattsven Over a year ago

@DaleWoods What are you wanting to do differently from existing functionality (what are you trying to change?)

Dale Woods Over a year ago

When you clicked the add to cart button, an ajax call was made - added the item to the cart - then added a div after the add to cart button saying 'check cart'. I just wanted to remove the part that added the div there. What I did was just force all the buttons to be direct links to the product landing page. I am happy with that. But this was a good lesson is tracing JavaScript functionality - which I will no doubt be able to use in the future. Thank you.

Zhenyi Luo · Accepted Answer · 2015-02-07 13:38:39Z

0

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>

answered Feb 7, 2015 at 13:38

Zhenyi Luo

615 bronze badges

1 Comment

Dale Woods Over a year ago

Thanks for your input, but this is Google analyltics tracking. This is not the ajax call which adds the product to the cart :)

Robert Sinclair · Accepted Answer · 2020-10-29 14:42:35Z

0

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

Then browse through the events

answered Oct 29, 2020 at 14:42

Robert Sinclair

5,5242 gold badges50 silver badges53 bronze badges

Collectives™ on Stack Overflow

Track down what javascript function sets up a click event

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related