Wordpress Shortcode关联的js无法正常工作

Question

我有一个插件，可以创建一个将表单输出到页面的简码。 表单本身没有什么特别之处（只是一堆html回显了）。 我遇到问题的地方是何时需要使用js处理该html。 由于某种原因，如果我尝试排队并注册js，则没有任何动态属性需要表单来工作，但是如果我只是将js直接放在简码下方，则一切都会按预期进行。 我通常不会在乎是否只为美观的js这么做，但是当按下“提交”按钮时，我也需要这种形式进行ajax调用，而且我不知道如何正确地使脚本入队。 。 下面是Form输出的类，以及将仅排队我需要的所有脚本的类：

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'));