Wordpress jQuery 脚本未在一个使用 jQuery.noConflict 的实例上启动答案

【问题标题】：Wordpress jQuery script is not starting on one instance with jQuery.noConflict usageWordpress jQuery 脚本未在一个使用 jQuery.noConflict 的实例上启动
【发布时间】：2014-12-23 12:51:42
【问题描述】：

我有 Wordpress 2 实例：本地和远程（远程应该非常相似，它主要是从本地上传的，除了一些插件）。代码使用 jQuery.noConflict 方法，因为没有它在添加大量插件后它无法在本地工作。现在，当它上传到远程 Wordpress 时，它仍然没有从那里开始，但它在本地工作:)。 JS 方法只是没有启动。确保文件在 HTML 文件的 HEAD 部分中附加了正确的路径。控制台中没有显示错误。

预期的行为是：JS 警报应该出现但没有出现。

JS代码在这里：

var jQueryAlias = jQuery.noConflict();       

function customizeWebUIForEmailSubscriberPlugin() {
        alert("customizeWebUIForEmailSubscriberPlugin"); 
        //format input button
        jQueryAlias('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');

        //format input button
        jQueryAlias('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');

        //format message text
        //jQuery('.elp_msg').removeClass('elp_msg').addClass('post-body');
        jQueryAlias('#elp_msg').addClass('message-format');


        //hide submit button
        jQueryAlias('#elp_txt_button').addClass('hide');        

        //hide email label
        jQueryAlias('.elp_lablebox').addClass('hide');        
    }

    jQueryAlias(customizeWebUIForEmailSubscriberPlugin);

【问题讨论】：

您对代码最后一行的期望是什么？它在 jQuery 对象中包装了一个函数...？
我只是想确保它开始...所以应该出现警报！

标签： javascript jquery wordpress

【解决方案1】：

试试下面的。该函数应该在document.ready 上触发，但您也可以随时调用它。

jQuery(function ($) {
    function customizeWebUIForEmailSubscriberPlugin() {
        alert("customizeWebUIForEmailSubscriberPlugin");
        //format input button
        $('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');

        //format input button
        $('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');

        //format message text
        //jQuery('.elp_msg').removeClass('elp_msg').addClass('post-body');
        $('#elp_msg').addClass('message-format');
        //hide submit button
        $('#elp_txt_button').addClass('hide');

        //hide email label
        $('.elp_lablebox').addClass('hide');
    }
    $(document).ready(function() {
        customizeWebUIForEmailSubscriberPlugin();
    });
});

编辑：

为了在 WP 中添加 jquery，请将此代码添加到主题的 functions.php 文件的底部，在结束 php 标记之前看起来像这样：?>:

function pk_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('pk_enqueue_scripts', 'wp_enqueue_scripts');

【讨论】：

这不是最佳选择:) 它可以启动两次:)....但它在我的远程实例上不起作用...奇怪
这是一个例子。一旦您的函数在 jQuery 范围内定义，您将能够从脚本中的任何其他位置调用它，但不能在它之外。至于您的远程问题，请检查您的控制台：也许您在远程服务器中启用的插件之一正在生成 JS 错误，从而阻止其余代码执行。右键单击，检查元素，控制台选项卡。
不幸的是：1) 我卸载了所有多余的插件 2) FF 控制台没有错误 3) 页面上没有显示错误。结果：问题依然存在。
尝试在$(window).load()而不是$(document).ready()上调用函数。另外，您能否提供一个指向您的远程站点的链接？
$(window).load - 它在本地不起作用。没有错误。我认为这是 WordPress 的问题

【解决方案2】：

问题在于，在两个服务器（本地和远程）上，jQuery 库以不同的顺序附加在 HEAD 标记中。在我的本地机器上：在 script.js 之后附加了 jQuery 并且有效。对于远程：在我的 script.js 之后附加了 jQuery。我不确定为什么它在我的远程机器上以这种方式工作。

解决方案： 添加代码后

<?php wp_enqueue_script("jquery"); ?>

在 HEAD 标记之后，它可以工作:)。

【讨论】：