代码在JSfiddle中工作，但在本地机器上没有

Question

我希望获得一个下拉清单，并且已经有人为bootftrap框架编写了一些代码。

我找到了这段代码http://codepen.io/bseth99/pen/fboKH

HTML

<br/>
<div class="container">
  <div class="row">
     <div class="col-lg-12">
        <div class="button-group">
        <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li>
         <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li>
         <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 3</a></li>
         <li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 4</a></li>
         <li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 5</a></li>
         <li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 6</a></li>
     </ul>
</div>

           

的Javascript

  var options = [];

$( '.dropdown-menu a' ).on( 'click', function( event ) {

   var $target = $( event.currentTarget ),
   val = $target.attr( 'data-value' ),
   $inp = $target.find( 'input' ),
   idx;

   if ( ( idx = options.indexOf( val ) ) > -1 ) {
     options.splice( idx, 1 );
     setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
   } else {
     options.push( val );
     setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
   }

   $( event.target ).blur();

   console.log( options );
   return false;
});

当我尝试在我的本地机器上复制它时，我无法将任何内容记录到我的浏览器控制台。我觉得这是一个小问题，但我无法找到它。任何帮助表示赞赏。

以上代码也适用于JSfiddle.net我不确定我在哪里犯了错误。

Answer 1

将您的JavaScript包裹在$(document).ready();中，根据您定义脚本的位置，您的JS可能会快速启动。

Answer 2

在DOM完全加载后绑定事件。

$(document).ready(function(){

   var options = [];

   $( '.dropdown-menu a' ).on( 'click', function( event ) {

   var $target = $( event.currentTarget ),
   val = $target.attr( 'data-value' ),
   $inp = $target.find( 'input' ),
   idx;

   if ( ( idx = options.indexOf( val ) ) > -1 ) {
    options.splice( idx, 1 );
   setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
   } else {
   options.push( val );
   setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
  }

  $( event.target ).blur();

  console.log(options );
  return false;
  });
  });