Hooking into the onclick event of buttons in Divi

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.

Filed under: Development, Divi, WordPressTagged with: , ,

6 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 😉

    • To those who aren’t clear about this… you’d need to give the button a custom class of “button-ga” for this to work.

  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. Jonathon,

    Nice work. what a great little tip.

    Thanks

  4. 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…

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


Add a Comment

Your email address will not be published. Required fields are marked *

Comment *

Name *
Email *
Website