JQuery代码不会从WP加载运行,而是从控制台运行

时间:2016-04-15 作者:Kevin Mamaqi

我试图获取一个值并将其传递给一个隐藏的输入,以便通过$\\u POST发送表单数据。我有一个下拉按钮和以下代码来更新值:

jQuery(document).ready(function($){

    var espSeleccionada = $(\'button[data-id="select-especialidad"]\');
    espSeleccionada.on("click", function() {
        // if changed to, for example, the last option, then
        // $(this).find(\'option:selected\').text() == D
        // $(this).val() == 4
        // get whatever value you want into a variable
        var x = $(this).text();
        // and update the hidden input\'s value
        $(\'#boton-prueba\').text(x);
    });

});
代码应该将值从一个按钮传递到另一个按钮,如中所示here 但是,当我从WordPress加载代码时,什么都没有发生。相反,当我在控制台上编写它时,它工作得很好。控制台中没有JS错误。

请注意,我正在使用。text()来测试代码是否工作,但它会。val(),然后再上线。

这是按钮HTML:

<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="select-especialidad" title="Hacienda" aria-expanded="false"><span class="filter-option pull-left">Hacienda</span></button>
Here 就是一个例子。

EDIT TO CLARIFY HOW I AM ADDING THE CODE TO IN WORDPRESS:

我通过函数添加脚本。php。这是我的代码:

function loading_my_scripts() {
    wp_enqueue_style( \'buscopreparador-style\', get_stylesheet_uri() );
    wp_deregister_style( \'buscopreparador-style\' );

    if ( !is_admin() ) {

        wp_enqueue_style( \'styles\', get_template_directory_uri() . \'/assets/css/styles.css\' );
        wp_enqueue_style( \'vertical-tabs\', get_template_directory_uri() . \'/assets/css/bootstrap.vertical-tabs.min.css\' );
        wp_enqueue_style(\'bootstrap-select-css\', \'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css\' );
        wp_enqueue_style( \'open-sans\', \'https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,400italic,700,700italic\');

        wp_deregister_script( \'jquery\' );
        wp_register_script(\'jquery\', \'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\', false, false, TRUE );
        wp_register_script(\'bootstrap\', \'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\', false, false, TRUE );
        wp_register_script(\'bootstrap-tabcollapse\', get_template_directory_uri() . \'/assets/js/bootstrap-tabcollapse.js\', false, false, TRUE );
        wp_register_script(\'bootstrap-select\', \'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js\', false, false, TRUE );
        wp_register_script(\'theme-js\', get_template_directory_uri() . \'/assets/js/theme.js\', array(\'jquery\'), false, TRUE );

        wp_enqueue_script( \'jquery\' );
        wp_enqueue_script( \'bootstrap\' );
        wp_enqueue_script( \'bootstrap-tabcollapse\' );
        wp_enqueue_script( \'bootstrap-select\' );
        wp_enqueue_script( \'theme-js\' );
    }

    if ( is_singular() && comments_open() && get_option( \'thread_comments\' ) ) {
        wp_enqueue_script( \'comment-reply\' );
    }
}
add_action( \'wp_enqueue_scripts\', \'loading_my_scripts\' );
代码位于theme.js 如下所示的文件:

( function( $ ) {
    var num_cols = 3,
    container = $(\'#menu-preparadores-de-oposiciones-en\'),
    listItem = \'li\',
    listClass = \'sub-list\';
    container.each(function() {
        var items_per_col = new Array(),
        items = $(this).find(listItem),
        min_items_per_col = Math.floor(items.length / num_cols),
        difference = items.length - (min_items_per_col * num_cols);
        for (var i = 0; i < num_cols; i++) {
            if (i < difference) {
                items_per_col[i] = min_items_per_col + 1;
            } else {
                items_per_col[i] = min_items_per_col;
            }
        }
        for (var i = 0; i < num_cols; i++) {
            $(this).append($(\'<ul ></ul>\').addClass(listClass));
            for (var j = 0; j < items_per_col[i]; j++) {
                var pointer = 0;
                for (var k = 0; k < i; k++) {
                    pointer += items_per_col[k];
                }
                $(this).find(\'.\' + listClass).last().append(items[j + pointer]);
            }
        }
    });

    if ($("body").hasClass("page-id-64")) {
      $(\'.tab-content\').addClass(\'col-sm-9\');
      $(\'#custom-tabs-0\').tabCollapse();
    } 

} ) ( jQuery );

jQuery(document).ready(function($){

    var espSeleccionada = $(\'button[data-id="select-especialidad"]\');
    espSeleccionada.on("click", function() {
        // if changed to, for example, the last option, then
        // $(this).find(\'option:selected\').text() == D
        // $(this).val() == 4
        // get whatever value you want into a variable
        var x = $(this).html();
        // and update the hidden input\'s value
        $(\'#boton-prueba\').html(x);
    });

}); 

( function() {
    var is_webkit = navigator.userAgent.toLowerCase().indexOf( \'webkit\' ) > -1,
        is_opera  = navigator.userAgent.toLowerCase().indexOf( \'opera\' )  > -1,
        is_ie     = navigator.userAgent.toLowerCase().indexOf( \'msie\' )   > -1;

    if ( ( is_webkit || is_opera || is_ie ) && document.getElementById && window.addEventListener ) {
        window.addEventListener( \'hashchange\', function() {
            var id = location.hash.substring( 1 ),
                element;

            if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
                return;
            }

            element = document.getElementById( id );

            if ( element ) {
                if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
                    element.tabIndex = -1;
                }

                element.focus();
            }
        }, false );
    }
})();

1 个回复
最合适的回答,由SO网友:Kevin Mamaqi 整理而成

好的,代码很好,问题是目标button[data-id="select-especialidad"] 正在由bootstrap select使用,即使脚本在我的代码之前加载,也需要几秒钟或更短的时间来处理信息。

因此,应该在检查事件是否已加载的函数之后包装代码。这是最终代码:

$(\'#select-especialidad\').on(\'loaded.bs.select\', function (e) {
    var y = $(this).val();
    $(\'#select-especialidad-hidden\').val(y);

    var espSeleccionada = $(\'button[data-id="select-especialidad"] > span.filter-option.pull-left\');
        espSeleccionada.on("click", function() {
            var x = $(this).text();
            $(\'#select-especialidad-hidden\').val(x);
        });
});
已加载。英国标准。选择此处有关bootstrap-select 事件。

相关推荐

JQuery php请求返回一个奇怪的结果

我有一个奇怪的小故障发生在我身上,我不知道我是如何产生它的,或者它是否是正常的。我正在开发自己的插件,当一个足球队/足球队被输入到一个框中时,它会检查它是否已经在数据库中。以下是我的代码行add_action( \'admin_footer\', \'fws_teamcheck_javascript\' ); function fws_teamcheck_javascript() { ?> <script type="text/javascript">