フッタからJqueryコードがロードされず、コンソールから実行されます

Question

$_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> 

は一例です：FULLコードを含めるhttps://fiddle.jshell.net/t9mvoxj5/

EDIT：

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

Answer 1

まあ、コードは結構です、問題ブートストラップセレクトによってターゲットbutton[data-id="select-especialidad"]が使用されていることと、ブートストラップセレクトが自分のコードの前にロードされても、数秒（または少なくともビット）t o情報を処理する。

したがって、イベントがロードされたことを確認する関数の後にコードをラップする必要があります。 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); 
     }); 
}); 

loaded.bs.select詳細：これは、最終的なコードです。