Wordpress Shortcode关联的js不起作用

Question

我有一个插件，它创建一个将表单输出到页面上的简码。表单本身并没有什么特别之处（只是一堆 html 回显）。我遇到问题的地方是当我需要使用 js 操作该 html 时。出于某种原因，如果我尝试将 js 排入队列并注册，我不需要表单的任何动态属性都可以工作，但如果我只是将 js 直接放在简码下方，那么一切都会按预期工作。我通常不会关心我是否必须只为审美 js 这样做，但我还需要这个表单来在按下提交按钮时进行 ajax 调用，如果没有正确排队脚本我不知道该怎么做.下面是表单输出的类和将我需要的所有脚本加入队列的类：

namespace mmUserPreference;


class Form
{
public function __construct()
{
    add_shortcode('user_preference_form', array($this, 'user_preference_form_shortcode'));
}

public function user_preference_form_shortcode()
{
    //the ../ is to keep the form submit on the first page level
    $output = '<div class="user_preference_form_container">';

    $output .= '<form id="user_preference" method="post">';

    $output .= '<div class="top_nav_up">';
    $output .= '<div class="top_nav_top_row">';
    $output .= '<div class="form_title_up">Manage Your e-Alerts</div>';
    $output .= '<div class="top_nav_up_right">';
    $output .= '<div class="form_submit_up"><input type="submit" value="Save"></div>';
    $output .= '<div class="form_collapse_up"><i class="fa fa-chevron-up rotate" aria-hidden="true"></i></div>';
    $output .= '</div>';
    $output .= '</div>';


    $output .= '<ul class="tabs_up">';
    $output .= '<li class="tab_link_up current" data-tab="topics">Topics</li>';
    $output .= '<li class="tab_link_up" data-tab="stocks">Stocks</li>';
    $output .= '</ul>';
    $output .= '</div>';

    $output .= '<div class="form_content_up">';
    $output .= '<div id="topics" class="tab-content-up current">';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="stocks_field" value="true"> Stocks</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="us_economy_field" value="true"> U.S. Economy</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="stock_market_today_field" value="true"> Stock Market Today</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="technology_article_field" value="true"> Technology Article</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="global_markets_field" value="true"> Global Markets</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="top_news_field" value="true"> Top News</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="nasdaq_field" value="true"> Nasdaq.com</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="investing_ideas" value="true"> Investing Ideas</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="oil" value="true"> Oil</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="tech_stocks" value="true"> Tech Stocks</div>';
    $output .= '</div>';
    $output .= '</div>';
    $output .= '<div id="stocks" class="tab-content-up">';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="aapl" value="true"> AAPL</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="lmt" value="true"> LMT</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="ekso" value="true"> EKOS</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="noc" value="true"> NOC</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="ups" value="true"> UPS</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="tsla" value="true"> TSLA</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="vz" value="true"> VZ</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="nvda" value="true"> NVDA</div>';
    $output .= '</div>';
    $output .= '<div class="row_up">';
    $output .= '<div class="input_label_up"><input type="checkbox" name="awk" value="true"> AWK</div>';
    $output .= '<div class="input_label_up"><input type="checkbox" name="rtn" value="true"> RTN</div>';
    $output .= '</div>';
    $output .= '</div>';
    $output .= '</div>';

    if(isset($_COOKIE['mmp_e'])) {

        $output .= '<input type="hidden"   name="email" value="' .  $_COOKIE['mmp_e'] . '">';

    } else {

        $output .= '<input type="text" name="email" required><br> Please enter the email address you would like these updates to be sent to. <br>';

    }

    $output .= '</form>';
    $output .= '</div>';

    echo $output;
    ?>

    <script>
//            jQuery(document).ready(function($) {
//                //for the user preference form tabs
//                $('div.user_preference_form_container    li.tab_link_up').click(function () {
//                    var tab_id = $(this).attr('data-tab');
//
//                    $('li.tab_link_up').removeClass('current');
//                    $('.tab-content-up').removeClass('current');
//
//                    $(this).addClass('current');
//                    $("#" + tab_id).addClass('current');
//                });
//
//                $('div.form_collapse_up').click(function () {
//                    $('.tabs_up').toggle('slow');
//                    $('.form_content_up').toggle('slow');
//                    $('.form_submit_up').toggle('slow');
//                    $('.form_collapse_up > .fa-chevron-up').toggleClass("down");
//                });
//            });
        </script>
        <?php
    }

}

然后将脚本加入队列

namespace mmUserPreference;


class loadScripts
{
public function __construct()
{
    add_action('wp_enqueue_scripts', array($this, 'loadScripts'));
}

public function loadScripts()
{
    wp_register_script(
        'user-preference-form-style-js',
        plugins_url('../js/mm-user-preference-form-style.js', __FILE__),
        array('jquery'),
        null,
        false);
    wp_register_script(
        'user-preference-form-submit-js',
        plugins_url('../js/mm-user-preference-form-submit.js', __FILE__),
        array('jquery'),
        null,
        true);
    wp_register_style(
        'user-preference-form-style-css',
        plugins_url('../css/mm-user-preference-form.css', __FILE__)

    );

    wp_enqueue_script('user-preference-form-style-js');
    wp_enqueue_script('user-preference-form-submit-js');
    wp_enqueue_style('user-preference-form-style-css');
}
}

那么主插件文件现在看起来像这样：

/*
Plugin Name: ******
Description: *****
Version:     1.0.0
Author:      ******
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

include 'classes/Form.php';
include 'classes/loadScripts.php';

use mmUserPreference\Form;
use mmUserPreference\loadScripts;
use mmUserPreference\sendEmail;
use mmUserPreference\userQuery;

$userPrefScripts = new loadScripts();
$userPrefForm = new Form();

任何想法我哪里出错了？

Answer 1

因此，无论出于何种原因，我都必须在“wp_footer”挂钩处加载我的脚本，以便我的简码受到 js 的影响，即：

add_action('wp_footer', array($this, 'loadScripts'));