Jquery 代码不会从页脚加载运行，而是从控制台运行答案

【问题标题】：Jquery code won't run loaded from footer, but run from consoleJquery 代码不会从页脚加载运行，而是从控制台运行
【发布时间】：2016-04-15 10:35:33
【问题描述】：

我正在尝试获取一个值并将其传递给隐藏的输入，以便通过$_POST 发送表单数据。我有一个下拉按钮和以下代码，以便在用户选择选项时更新值：

jQuery(document).ready(function($) {
    var espSeleccionada = $('button[data-id="select-especialidad"]');
    espSeleccionada.on("click", function() {
        var x = $(this).text();
        $('#boton-prueba').text(x);
    });
});

代码应该将值从一个按钮传递到另一个按钮，如此处的示例所示，但是，当我从 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>

这里是一个例子：https://fiddle.jshell.net/t9mvoxj5/

编辑以包含完整代码：

( 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() {
        var x = $(this).text();
        $('#boton-prueba').text(x);
    });
});

【问题讨论】：

第一行在我看来是错误的。不应该是$(document).ready(function(){吗？
你好@JamesMcCormac，在 WordPress 中是必需的：stackoverflow.com/questions/1327085/…
啊，我的立场是正确的 :) 我没有为 wordpress 写过任何东西。
你的 JS 小提琴工作正常。您是否直接尝试过 .click 方法？例如espSeleccionada.click(function() { ?这里似乎有类似的问题：stackoverflow.com/questions/14395613/…
不，但谢谢。同样，当我从控制台运行它时它确实有效，但它不能从网站运行。 var espSeleccionada = $('button[data-id="select-especialidad"]'); espSeleccionada.click(function() { var x = $(this).text(); $('#boton-prueba').text(x); });

标签： javascript jquery wordpress

【解决方案1】：

好吧，代码很好，问题是引导选择正在使用目标button[data-id="select-especialidad"]，即使引导选择在我的代码之前加载，也需要几秒钟（或至少一点）处理信息。

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

$('#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);
        });
});

loaded.bs.select here 有关bootstrap-select 事件的更多信息。

【讨论】：