In the Divi Theme Users & Elegant Marketplace group, Brett Bumeter asked, “anyone ever find a quick way to add an onclick event to a Divi Button?”

More specifically, Brett needs to replicate the onclick event on a regular html button, but using a Divi button.

<button onclick="myFunction()">Click me</button>

First thing we need to do is look at a Divi button’s html.

<a class="et_pb_button  et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="">Button</a>

So a Divi button is really just a styled anchor tag. That’s fine, we can use the onclick event on an anchor tag. However we can’t edit a Divi button’s html, so we can’t add a function to the onclick event. What we can do is use some jQuery to bind a function to the anchors onclick event.

Here’s what that would look like:

$(".et_pb_button").on("click", function(){
    event.preventDefault();
    alert("Button clicked"); 
 });

So what this does is bind to the onclick event of any element that has a class of “et_pb_button”, prevent the default action of that element (in this case opening a url) and then performs whatever functionality you need (in this case showing the alert).

Pretty simple really. You can use this Javascript snippet in a child theme as is, or you can insert it into the Divi Theme Options -> Integrations -> Add code to the < head > of your blog’ area. If you are going to go the second route, you will need to wrap the snippet above in a document ready enclosure and some script tags, like so

<script>
jQuery(function ($) {
    $( document ).ready(function() {
        $(".et_pb_button").on("click", function(){
            event.preventDefault();
            alert("Button clicked"); 
        });
    }); 
});
</script>

You could also take this a step further, and use it to pass some data to the onclick event, by using a custom button id or class. Let’s say we give the button a custom id of ‘one’.

$(".et_pb_button").on("click", function(){
    var id = $(this).attr("id");
    alert("Button " + id + " clicked");
});

In this instance the custom id of ‘one’ would be passed to the ‘id’ variable, which could then be used to call some other function, which needs that value.

Happy Diviing.

Buy my Divi Plugins from
Elegant Marketplace.

Join the conversation

27 Comments

  1. Here is the code for Google Analytics :

    jQuery(function ($) {
    $( document ).ready(function() {
    $(“.button-ga”).on(“click”, function(e){
    var id = e.target.id;
    ga(‘send’, ‘event’, ‘Download’, ‘Document’);
    });
    });
    });

    Best 😉

  2. We got different landing pages with a button that goes to our google place listing. (So we reckon we will have to create a different conversion code for each button on different landing page).

    We want to add the google adword conversion onclick tracking to the Divi Button or Call to Action Button.

    We are total noob. So do we need to put that code into the child theme? Which file of the child theme do we put this in? Or how do we put the google onclick code into the Divi button

  3. Jonathan, not a big deal, but I’d probably avoid using “1” as an id on an element. I can totally seeing that messing up some javascript or introducing some hard to find bug where a string is being treat like a number. I know it’s technically compliant in html5+ but still, with great power…

    1. Gary, good point. The id value was meant for illustration purposes only, but I’ve updated the article to use a string instead.

  4. I’ve tried to follow this example, not sure why the event doesn’t trigger. On the button element in CSS Class I’ve added get_started and then in integration/header added the following code.

    jQuery(function ($) {
    $( document ).ready(function() {
    $(“.get_started.et_pb_button”).on(“click”, function(e){
    var id = e.target.id;
    ga(‘send’, ‘event’, ‘Button’, ‘Get Started’);
    });
    });
    });

    1. It works for me in this way:

      jQuery(function($) {
      $(“.diviButton”).on(“click”, function(){
      alert(“Button clicked”);
      event.preventDefault();
      });
      });

  5. Brilliant and simple explanation thanks..

    Related to my project, is there anyway to update the content of an Image using jquery

    I can update a blurb title and blurb text using

    var myblurb = document.getElementByID(‘testblurb’);
    myblurb.querySelector(“.et_pb_module_header”).innerHTML = “Hello World”;
    myblurb.querySelector(“.et_pb_module_description”).innerHTML = “its a brand new day”;

    but when I try an image

    var myimage = document.getElementByID(‘testimage’);
    myimage.querySelector(“.et_pb_image_wrap”).src = “http://example.com/image/testimage.jpg”;

    nothing happens…

    only way I found to make this work is to use a custom code module and HTML for the image but would like to use the built in modules.

    1. It would depend on what’s being clicked to watch the video, but if there was an overlay that needed to be clicked to watch the video, theoretically yes.

  6. Hi Jonathan!

    Could something similar be used with the Contact form module for a LinkedIn or Twitter pixel. I’m having a really hard time with this adding the conversion tracking from a specific add to the contact us section on our website.

  7. How would you add Google Adwords tracking snippet to the submit button of the contact form? Right now, I am redirecting to a thank you page, but I don’t like the implementation. Thanks for your help.

    1. Hi Sandy, it’s a little bit trickier to implement Google AdWords tracking, as you would need to trigger a tracking event on the submit click.

  8. Hey Jonathan,

    I try to get it to work for adwords. Could you help me?

    Thats what i tried so far, but its not working.

    jQuery(function ($) {
    $( document ).ready(function() {
    $(“.et_pb_button”).on(“click”, function(){
    if (typeof(url) != ‘undefined’) {
    window.location = url;
    }
    };
    gtag(‘event’, ‘conversion’, {
    ‘send_to’: ‘AW-XXXXXXXXXXXXXXXX’,
    ‘event_callback’: callback
    });
    return false;
    });
    });
    });

    1. Hi Alex, I’ve looked at the code and I’m not sure what you are trying to do, are you trying to track an adwords conversion when the button is clicked?

        1. Ok, so to start with it looks like you have too many closing characters, you need to remove one extra }); at the end of the jQuery function enclosure.

          Then, I don’t work with AdWords or the Google Global Site tag, but I think what you have to do is something like wrapping the gtag call inside the button onclick:


          jQuery(function ($) {
          $(document).ready(function () {
          $(".et_pb_button").on("click", function () {
          gtag('event', 'conversion', {
          'send_to': 'AW-XXXXXXXXXXXXXXXX',
          'event_callback': callback
          });
          });
          return false;
          });
          });

  9. How can I make the button validate the email which is a required field?

    jQuery(function ($) {
    $( document ).ready(function() {
    $(“.diviclick”).on(“click”, function(){
    event.preventDefault();
    $(‘#guiarapidaoptin’).submit();
    });
    });
    });

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Updates

Join my mailing list to receive the latest news and updates from me. No spam, just one email newsletter a month.

Thank you, you have successfully subscribed.

%d bloggers like this: