jQuery 有时会以正确的顺序加载，有时却不会答案

【问题标题】：jQuery sometimes loads in the correct order and sometimes it does notjQuery 有时会以正确的顺序加载，有时却不会
【发布时间】：2015-10-15 20:05:08
【问题描述】：

我有一个运行 Master Slider Pro wordpress 插件和 iLightBox 插件的网站。我在 wordpress 子主题的 custom.js 文件中运行自定义脚本：

/* Link JavaScript file */
function custom_scripts() {
    wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery') , false, true );
    wp_enqueue_script( 'custom-script' );
}

我在我的functions.php文件中按照以下内容调用自定义文件：

jQuery(document).ready(function(){

    (function(){
      var groupsArr = [];
      jQuery('[rel^="ilightbox["]').each(function () {
        var group = this.getAttribute("rel");
        jQuery.inArray(group, groupsArr) === -1 && groupsArr.push(group);
      });
      jQuery.each(groupsArr, function (i, groupName) {
        jQuery('[rel="' + groupName + '"]').iLightBox({ /* options */ });
      });
    })();

  });

我遇到的问题是，有时它会加载自定义脚本（我假设以正确的顺序）并且我的滑块会加载并且当我单击图像时会显示灯箱......其他时候滑块会卡在加载状态并显示错误：

Uncaught TypeError: jQuery(...).iLightBox is not a function

我相信我在加载 jQuery 文件后加载 custom.js 文件......我假设的是，lighbox 插件有时在 jQuery 之后加载，因此在 custom.js 文件之后加载，这就是它的原因找不到 ilightbox 功能？

无论如何我可以防止这种情况发生？

更新： 还在和这帮人苦苦挣扎。我一直在阅读并与我的主题作者（已集成 ilightbox 功能）交谈。

我的代码现在如下所示：

/* register script that defines ilightbox (in parent theme) */
wp_register_script( 'ilightbox_script', get_stylesheet_directory . '/includes/class-avada-scripts.php' );

/* Link JavaScript file */
function custom_scripts() {
    wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery', 'ilightbox_script') , false, true );
    wp_enqueue_script( 'custom-script' );
}

add_action( 'wp_enqueue_scripts', 'custom_scripts', 99 );

我相信我现在已经注册了包含 ilightbox 功能的脚本（存储在我的父主题中）。然后我在 jQuery 之后调用了 custom.js 文件，并且注册的脚本已经加载。但是它仍然无法正常工作。我现在尝试注册的文件中也出现以下错误：

Uncaught SyntaxError: Unexpected token <

也许我误解了一切，所以当我问到哪个罚款定义了 ilightbox 功能时，我复制了主题作者对我说的内容。你怎么看？

这些脚本在 class-avada-scripts.php 中可用以下目录

/wp-content/themes/avada/includes

所有 JS 代码都在 main.min.js 中，可在以下目录中找到

/wp-content/themes/avada/assets/js

但是，如果您从
启用开发者模式
Wp 管理 -> 外观 -> 主题选项 -> 高级

然后你可以修改 avada-lightbox.js 和 lightbox.js 中的代码在同一目录中可用。

【问题讨论】：

你是如何加入灯箱插件的？ iLightBox 不包含在核心 jQuery 中……因此您还需要包含其他相关脚本。如果您将其作为插件的一部分包含在内，请找出该脚本已注册的名称并将其添加到您的 custom.js 依赖项数组中（例如 array( 'jquery', 'ilightbox_whatever' )）
请查看我对原始消息的更新

标签： javascript jquery wordpress

【解决方案1】：

您需要加载脚本并将 jQuery 添加为依赖项：

// Enqueue a script that has both jQuery (automatically registered by WordPress)
// and my-script (registered earlier) as dependencies.
wp_enqueue_script( 'my-careers-script', get_stylesheet_directory_uri() . '/js/my-careers-script.js', array( 'jquery', 'my-script' ) );

链接自 WordPress Codex：https://codex.wordpress.org/Function_Reference/wp_register_script#Example_of_Automatic_Dependency_Loading

【讨论】：