code working in JSfiddle but not on local machine

Question

I am looking to get a drop-down checklist and therewas already some code written by someone for bootftrap framework.

I found this code 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;
});

When i try to replicate the same in my local machine I am not able to log any to my browser's console.I feel like it's a small issue but I am not able to find it. Any help is appreciated.

The above code also works in JSfiddle.net I am not sure where I am making a mistake.

@AndrewLyndem No errors. Nothing is getting logged to the console — Morpheus, Jul 07 '16 at 16:37
@FastSnail I have added them. But still nothing. That was in fact the first thing i did. — Morpheus, Jul 07 '16 at 16:37

score 2 · Answer 1 · answered Jul 07 '16 at 16:40

2

Wrap your JavaScript in a $(document).ready(); Its possible that your JS is firing to quickly depending on where you've defined your scripts.

answered Jul 07 '16 at 16:40

ProEvilz

5,310
9
44
74

score 1 · Accepted Answer · answered Jul 07 '16 at 16:44

just bind the event after the DOM is completely loaded.

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

code working in JSfiddle but not on local machine

HTML

Javascript

2 Answers2