出列脚本以防止WordPress子主题上的javascrip事件冲突

时间:2015-03-01 作者:Giulio Bonanome

我建立了一个儿童主题Divi Theme 用于Buddypress. 到目前为止还不错,除了注释按钮上的脚本冲突。

主题加载javascript(js/custom.js 在2642:2662),具有以下功能:

    $( \'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;
            }
        }
    });
此事件的目标是Buddypress用于评论的同一个按钮,防止在单击时加载AJAX表单。

enter image description here

我不想编辑父主题(custom.js)。我如何防止这种冲突?是否有解决方法,可能来自functions.php?

UPDATE

使用wp_dequeue_script 要稍后加载该脚本,无法运行。在函数中使用此代码时。php

function de_script() {
    wp_dequeue_script( \'divi-custom-script\' );
}
add_action( \'wp_print_scripts\', \'de_script\', 100 );
然后根本没有加载完整的脚本(custom.js)。

4 个回复
最合适的回答,由SO网友:Giulio Bonanome 整理而成

首先,为了解决javascript冲突,我设置了一个tl_custom.js 在我的主题下js/ 文件夹,具有以下代码

jQuery(document).ready(function($) {
    //  Remove handler set by themes/Divi/js/custom.js at line 2642
    $( \'a[href*=#]:not([href=#])\' ).off();
});
然后,在中添加带有以下代码的脚本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 );
主要问题是父主题注册custom.js 在页脚中,所以我必须设置wp_register_script 最后一个参数到true 然后设置add_action 优先级为20。

SO网友:fryvisuals

我只是遇到了同样的问题,我的高级主题没有buddypress支持。禁用click事件将删除滚动到我的一个内部页面上的页面锚定的功能。因此,我只针对buddypress类来启用注释/回复按钮。

if ( $(\'body\').hasClass(\'buddypress\') ) {

    $( \'a[href*=#]:not([href=#])\' ).off();

}
我将代码放在自定义中。然后,我的子主题中的js文件将函数中的资源排入队列。php。确保文件在premium主题的js之后排队。

SO网友:Milo

从纯WordPress的角度来看,我看到的唯一解决方案是将脚本复制到子主题并对其进行编辑以消除冲突。如果父主题使用get_template_directory_uri 要引用脚本的路径,还必须将原始版本出列,并将修改后的版本入列。如果使用加载脚本get_stylesheet_directory_uri, 然后,只需在子主题中镜像相同的层次结构,即可正确覆盖脚本,而无需执行任何其他操作。

当然,问题将在于父主题更新添加或修改脚本文件,您必须监视每个更新,以确保更新的主题不会被破坏或丢失功能。

SO网友:Jason Murray

我可能在这里偏离了轨道,但会删除return false; 从javascript发布帮助?

return false; 在click函数中,如下所示:

   event.preventDefault();
   event.stopPropagation();
我认为这就是为什么您的另一个函数没有启动的原因,因为对于将多个处理程序绑定到元素上的同一事件没有任何限制。但是,删除return false; 可能会给您带来其他问题。

结束

相关推荐

允许admin-ajax.php接收“application/json”而不是“x-www-form-urlencode”

我在用AngularJS的$http 函数将我的有效负载发送到WordPressadmin-ajax.php 子系统,但后者似乎只接受x-www-form-urlencoded 数据,而不是application/json 由Angular提供。我知道there are ways 使$http函数更像$.post(), 但这是荒谬的——既然已经是JSON,为什么还要将一堆JSON数据转换成一种形式呢?为此目的—is there any way of instructing admin-ajax to co