无法从 Wordpress 中的 HTML 中的 JS 文件调用函数答案

【问题标题】：Can't call functions from a JS file in HTML in Wordpress无法从 Wordpress 中的 HTML 中的 JS 文件调用函数
【发布时间】：2015-03-22 23:37:16
【问题描述】：

快速总结：我有一个 .js 文件中的函数，该函数通过 wp_enqueue_scripts 加载。现在，当我尝试从我的一个模板文件中的 HTML 调用该函数时，它似乎不起作用...

我对此进行了研究，我认为我做得很好，但显然我一定错过了一些东西，无法完全确定它是什么。

所以，在 functions.php 中，我有以下代码：

function script_assets() {
    wp_enqueue_script( 'js-code', get_template_directory_uri() . '/js/js-code.js' );
}
add_action( 'wp_enqueue_scripts', 'script_assets' );

这按预期工作，并导致将其添加到头部：

<script type='text/javascript' src='http://.../js/js-code.js?ver=4.1.1'></script>

那么，在header.php中，wp_head();之后我有如下一段代码：

<?php if ( !is_front_page() ) : ?>
    <script type="text/javascript">
    /* <![CDATA[ */
        setTimeout(function(){ deploy($("#rightsec .deployer")); }, 200);
        setTimeout(function(){ switchMobile($("#switcher")); }, 200);
    /* ]]> */
    </script>
    
<?php endif; ?>

PHP 位可以正常工作，只要我没有按预期显示在首页上，脚本标记和介于两者之间的所有内容就会进入 HTML。它在 js-code.js 通过我上面粘贴的行加载之后进行。 deploy() 和 switchMobile() 都是 js-code.js 中的函数，我知道它们可以工作，因为我在不同的上下文中使用它们没有问题。

然而 Chrome 抛出

未捕获的引用错误：未定义部署

未捕获的 ReferenceError：未定义 switchMobile

并且函数没有执行...

我知道“如何从 HTML 调用 JS 函数”的问题已经被问过无数次了，但是就像我说的，我已经阅读了很多页面，它们似乎都在说同样的话，我一直在关注信，还是不行……

有什么想法吗？谢谢。

新进展：

因此，事实证明，出于某种奇怪的原因，如果我只调用函数而不使用 setTimeout()，那么第二个 * — switchMobile() — 可以正常工作......但不是第一个。如果我反转它们，使deploy() 在switchMobile() 之后，那么这一次deploy() 有效。我完全糊涂了：s

*为了清楚起见，我最初的示例只有一个函数，而实际上我调用了两个函数。我已经编辑了问题以反映这一点。

更新

尝试将函数调用包含在$(document).ready(function(){ .. }); 中，尝试使用switchMobile(jQuery('#switcher'));，尝试完全不使用JQuery（使用document.getElementById("switcher")）......没有任何效果。在函数调用旁边添加alert() 可以按预期工作...

【问题讨论】：

在文件初始化之前是否调用了switchMobile？
不，它是在它之后调用的。但是我尝试在页脚中加载文件，但它没有解决任何问题。
你调用的function.php文件是从孩子那里调用wp_enqueue_script还是主题？
这是我正在使用的子主题。

标签： javascript php jquery html wordpress

【解决方案1】：

所以这是一个范围问题，我不得不像这样将函数调用括起来：

jQuery(document).ready(function($) {
    deploy($('#rightsec .deployer'));
});

可能还有其他方法可以做到，但它的工作原理是这样的，所以我不会改变它。

【讨论】：