Jquery code won't run loaded from footer, but run from console

Question

I'm trying to get a value and pass it to a hidden input in order to send form data via $_POST. I have a dropdown button and the following code in order to update the value when a user select an option:

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

The code is supposed to pass the value from one button to another, as shown in here the example, but, when I load the code from WordPress header/footer/theme nothing happens. Instead, when I write it on the console it works fine. There are no JS errors in console.

Please note that I'm using .text() to test if the code works, but it would have .val() before going live.

This is the button 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 is an example: https://fiddle.jshell.net/t9mvoxj5/

EDIT TO INCLUDE THE FULL CODE:

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

The first line looks wrong to me. Shouldn't it be ```$(document).ready(function(){``` ? — James McCormac, Apr 15 '16 at 11:01
Hello @JamesMcCormac, in WordPress it is required: http://stackoverflow.com/questions/1327085/jquery-ready-function-doesnt-work-in-wordpress — Kevin Mamaqi, Apr 15 '16 at 11:04
ah, I stand corrected :) I've not written anything for wordpress. — James McCormac, Apr 15 '16 at 11:06
your JS fiddle works fine. Have you tried the .click method directly? e.g. ```espSeleccionada.click(function() {``` ? There seems to be a similar issue here: http://stackoverflow.com/questions/14395613/wordpress-jquery-event-handler-with-on — James McCormac, Apr 15 '16 at 11:09
No, but thank you. Again, it does work when I run it from the console, but it doesn't from the website. `var espSeleccionada = $('button[data-id="select-especialidad"]'); espSeleccionada.click(function() { var x = $(this).text(); $('#boton-prueba').text(x); });` — Kevin Mamaqi, Apr 15 '16 at 11:15
are you able to show all the code? The other issue could be multiple objects with the same ID? It's hard to be sure without some more context. — James McCormac, Apr 15 '16 at 11:18

score 0 · Accepted Answer · answered Apr 18 '16 at 07:29

Well, the code is fine, the problem is that the target button[data-id="select-especialidad"] is being used by bootstrap-select and even if bootstrap-select loads before my code, it takes a few seconds (or at least a bit) to process the information.

So the code should be wrapped after a function that checks that the event has been loaded. This is the final code:

$('#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 more info on the bootstrap-select events.

Jquery code won't run loaded from footer, but run from console

1 Answers1