代碼在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

僅在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; 
    }); 
    }); 

Answer 2

將您的JavaScript包含在$(document).ready();根據您定義腳本的位置，您的JS可能會快速啓動。