Dequeue script to prevent javascript event conflict on wordpress child theme

Question

I've built a child theme of Divi Theme to use with Buddypress. So far so good, except for a script conflict on commenting buttons.

The theme load a javascript (js/custom.js at 2642:2662) with the following function:

 $( 'a[href*=#]:not([href=#])' ).click( function() { if ( $(this).closest( '.woocommerce-tabs' ).length && $(this).closest( '.tabs' ).length ) { return false; } if ( location.pathname.replace( /^\//,'' ) == this.pathname.replace( /^\//,'' ) && location.hostname == this.hostname ) { var target = $( this.hash ); target = target.length ? target : $( '[name=' + this.hash.slice(1) +']' ); if ( target.length ) { et_pb_smooth_scroll( target, false, 800 ); if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) { setTimeout(function(){ et_pb_smooth_scroll( target, false, 200); }, 500 ); } return false; } } }); 

This event target the same button that Buddypress use for commenting, preventing AJAX form from loading on click.

I don't want to edit the parent theme (custom.js). How can I prevent this conflict? Is there a workaround, maybe from functions.php?

UPDATE

Using wp_dequeue_script to load that script later, didn't work. When using this code in functions.php

function de_script() { wp_dequeue_script( 'divi-custom-script' ); } add_action( 'wp_print_scripts', 'de_script', 100 ); 

then the full script (custom.js) was not loaded at all.

Answer 1

First of all, to resolve the javascript conflict I've set up a simple tl_custom.js under my theme js/ folder, with the following code

jQuery(document).ready(function($) { // Remove handler set by themes/Divi/js/custom.js at line 2642 $( 'a[href*=#]:not([href=#])' ).off(); }); 

Then I add the script with the following code in functions.php

function tl_custom_scripts() { if ( ! is_admin() ) { $scriptsrc = get_stylesheet_directory_uri() . '/js/'; wp_register_script( 'tl_custom', $scriptsrc . 'tl_custom.js', '', '', true ); wp_enqueue_script( 'tl_custom' ); } } add_action( 'wp_enqueue_scripts', 'tl_custom_scripts', 20 ); 

The main problem is that the parent theme register custom.js in the footer, so I had to set the wp_register_script last parameter to true and then set add_action priority to 20.

Answer 2

I just ran into this same problem with my premium theme not having buddypress support. Disabling the click event removes the ability to have scrollto page anchors which I have on one of my interior pages. So I just target the buddypress class to enable the comment/reply buttons.

if ( $('body').hasClass('buddypress') ) { $( 'a[href*=#]:not([href=#])' ).off(); } 

I placed the code in a custom.js file in my child theme then enqueued the resource from functions.php. Make sure the file is enqueued after the premium theme's js.

Answer 3

From a purely WordPress perspective, the only solution I see would be to copy the script to your child theme and make edits to it to remove the conflict. If the parent theme uses get_template_directory_uri to reference the path to the script, you'll also have to dequeue the original, and enqueue your modified version. If the script is loaded using get_stylesheet_directory_uri, then simply mirroring the same hierarchy in your child theme will correctly override the script without having to do anything else.

Of course, the issue will be with parent theme updates adding or modifying that script file, you will have to monitor each update to insure your updated theme is not broken or missing functionality.

Answer 4

I might be off track here, but would removing the return false; from the javascript you posted help?

return false; in a click function is like saying:

 event.preventDefault(); event.stopPropagation(); 

I think this is why your other function is not firing as there is no restriction to having multiple handlers bound to the same event on an element. However removing the return false; may cause you other issues.