Bootstrap和Popper的WordPress JS加载问题

用户名

脚本加载时似乎有些古怪,会导致问题。我有这个:

function fyxt_custom_scripts() {
    wp_enqueue_script('jquery');
    //load order is important (from website jquery, popper, bootstrap)
    wp_register_script('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script('prefix_bootstrap');
}
add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );

我收到以下控制台错误:

未捕获的TypeError:引导程序的工具提示需要Popper.js(https://popper.js.org/

所以我在WordPress中添加了以下内容。

    function fyxt_custom_scripts() {
        wp_enqueue_script('jquery');
        //popper for bootstrap
        wp_register_script( 'popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'',true );
        wp_enqueue_script( 'popper' );
        //load order is important (from website jquery, popper, bootstrap)
        wp_register_script('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
        wp_enqueue_script('prefix_bootstrap');
    }
    add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );

一旦进入,就会加载popper。但是现在,我又遇到了另一个错误。知道为什么吗?

tooltip.js:559 Uncaught TypeError: this.element.getAttribute is not a function
    at i.t._fixTitle (tooltip.js:559)
    at i.t._setListeners (tooltip.js:554)
    at new i (tooltip.js:142)
    at i.t._enter (tooltip.js:576)
    at HTMLDocument.<anonymous> (tooltip.js:528)
    at HTMLDocument.handle (jquery.js?ver=1.12.4-wp:3)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4-wp:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4-wp:3)

因此,似乎可以识别工具提示,但说它需要弹出窗口。但是随后它得到了解决,并提示了一些错误。这里发生了什么?

我尝试了几种解决方案,但没有任何效果。我认为这与加载顺序/依赖性有关。这是完整的加载脚本。

function fyxt_custom_scripts() {
    wp_enqueue_style( 'jquery-custom', plugin_dir_url( __FILE__ )  . '../css/fyxt-theme-2/jquery-ui-1.10.4.custom.css' );
    wp_enqueue_style( 'jquery-custom', plugin_dir_url( __FILE__ )  . '../css/fyxt-theme-2/jquery-ui-1.10.4.custom.min.css' );   

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-tabs' );
    wp_enqueue_script( 'jquery-ui-button' );
    wp_enqueue_script( 'jquery-ui-accordion' );
    wp_enqueue_script( 'jquery-ui-slider' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-widget' );
    wp_enqueue_script( 'jquery-ui-progressbar' );
    wp_enqueue_script( 'jquery-ui-sortable' );
    wp_enqueue_script( 'jquery-ui-autocomplete' ); //for tags, use later for generators (powers, effects, etc)

    wp_enqueue_script( 'tabs-script', plugin_dir_url( __FILE__ ) . '../js/tabs.js', array('jquery-ui-core', 'jquery-ui-accordion', 'jquery-ui-tabs') );

    wp_enqueue_script( 'tags-script', plugin_dir_url( __FILE__ ) . '../js/tagmanager-master/tagmanager.js', array(), '', false );
    wp_enqueue_style( 'tags-custom', plugin_dir_url( __FILE__ ) . '../js/tagmanager-master/tagmanager.css' );

    //plupload
    wp_enqueue_script( 'plupload-full', plugin_dir_url( __FILE__ ) . '../js/plupload.full.min.js', array(), '', false );
    wp_enqueue_script( 'plupload-scripts', plugin_dir_url( __FILE__ ) . '../js/jquery.ui.plupload/jquery.ui.plupload.min.js', array(), '', false );
    wp_enqueue_style( 'plupload-css', plugin_dir_url( __FILE__ ) . '../js/jquery.ui.plupload/css/jquery.ui.plupload.css' );

    //popper for bootstrap
    wp_register_script( 'popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'', false );
    wp_enqueue_script( 'popper' );

    //bootstrap
    wp_register_style('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
    wp_enqueue_style('prefix_bootstrap');

    //load order is important (from website jquery, popper, bootstrap)
    wp_register_script('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array( 'popper' ),'', false );
    wp_enqueue_script('prefix_bootstrap');

}

add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );

如果包含“ tabs-script”,我会收到错误消息,jQuery按钮都坏了。制表符和手风琴起作用。

tooltip.js:568 Uncaught TypeError: this.element.getAttribute is not a function
    at i.t._fixTitle (tooltip.js:568)
    at i.t._setListeners (tooltip.js:563)
    at new i (tooltip.js:140)
    at HTMLDocument.<anonymous> (tooltip.js:767)
    at Function.each (jquery.js?ver=1.12.4-wp:2)
    at a.fn.init.each (jquery.js?ver=1.12.4-wp:2)
    at a.fn.init.i._jQueryInterface [as tooltip] (tooltip.js:758)
    at HTMLDocument.<anonymous> (tabs.js?ver=ec6af3c620057499034adb106af5aae1:10)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

如果我注释掉“ tabs-script”,我可以使用jquery按钮,但是它将破坏tabs和手风琴。

jquery.ui.plupload.min.js?ver=ec6af3c620057499034adb106af5aae1:1 Uncaught TypeError: i.widget is not a function
    at jquery.ui.plupload.min.js?ver=ec6af3c620057499034adb106af5aae1:1
    at jquery.ui.plupload.min.js?ver=ec6af3c620057499034adb106af5aae1:1

我不熟悉加载顺序和依赖性,因此这里的建议会很棒。非常感谢你的帮助!

用户名

看来PLUpload是导致问题的原因之一。我尝试了许多不同的配置和加载顺序,但它似乎总是因plupload而中断。我决定不使用它,而是使用另一个类似的插件Dropzone。PLupload几年未进行更新,因此无论如何都应该使用更新的/现代的样式。谢谢大家的提示和建议。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

带有jQuery和Popper.js的Bootstrap(精简)

Django 加载 CSS 和/或 JS 的问题

使用Node JS和React js的文件加载问题

Require.js加载CDN引导程序和CDN popper

如何使用 popper.js 和 bootstrap 初始化工具提示

如何使用 Browserify / Gulp 要求 Bootstrap 4 依赖项(jQuery 和 Popper.js)

带有Aurelia CLI和Require.js的Bootstrap 4错误“ Bootstrap下拉列表需要Popper.js”

使用Webpack时出现Bootstrap Popper问题

Wordpress css加载问题

Bootstrap 4,Popper.JS和WebPack -“导入和导出可能仅与sourceType:module一起出现”

Popper.js无法加载

Vue.js 2 popper.js的Bootstrap-Vue Popover持久性问题

Barba.js:scrollRestoration 和 Wordpress 问题

如果popper.js无法加载,则回退

JS插件加载问题

Angular 4 Bootstrap下拉列表需要Popper.js

如何在Bootstrap 4 Beta中使用Popper.js

如何使用Bootstrap 4安装popper.js?

Bootstrap 4 Beta-是否需要Popper.js?

Bootstrap 4 / Popper.js干扰自动建议

Angular 8和Angular CLI,包括moment.js或popper.js模块的应用程序的“ ng服务”问题

npm中的“ popper”和“ popper.js”是两个不同的软件包吗?

如何使用 vue-cli 和 vue.config.js 在灯塔上纠正“预加载密钥请求”性能问题

仅在几页上加载WordPress插件的CSS和JS脚本?

在WordPress中加载多个CSS和JS文件

CSS和JS问题

JS 和 Rails 的问题

使用Webpack 3.x导入Popper.js的Bootstrap 4 Beta抛出Popper不是构造函数

延迟加载和 Hibernate.initialize() 的问题;