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
jQuery(function ($) { $( document ).ready(function() { $(".et_pb_button").on("click", function(){ event.preventDefault(); alert("Button clicked"); }); }); });
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.