I have the following HTML and would like to use Bootstrap's button plugin - .html#buttons to select the "value" element:

<div class="btn-group pull-right nav-tabs" data-toggle="buttons-radio">
  <button class="btn" value="60">Hour</button>
  <button class="btn" value="1440">Day</button>
  <button class="btn" value="10080">Week</button>
  <button class="btn" value="43200">30 Day</button>
</div>

I have the following JavaScript that executes onClick successfully, but returns undefined.

$('.nav-tabs').button().click( function(e){     

  var selected = $(this).attr('value');

  console.log(selected);
});

Can anyone advise how I can get the "value" element from the html?

I have the following HTML and would like to use Bootstrap's button plugin - http://twitter.github./bootstrap/javascript.html#buttons to select the "value" element:

<div class="btn-group pull-right nav-tabs" data-toggle="buttons-radio">
  <button class="btn" value="60">Hour</button>
  <button class="btn" value="1440">Day</button>
  <button class="btn" value="10080">Week</button>
  <button class="btn" value="43200">30 Day</button>
</div>

I have the following JavaScript that executes onClick successfully, but returns undefined.

$('.nav-tabs').button().click( function(e){     

  var selected = $(this).attr('value');

  console.log(selected);
});

Can anyone advise how I can get the "value" element from the html?

• javascript
• jquery
• twitter-bootstrap

1 Answer 1

You're not selecting the button. It should look like this.

$('.nav-tabs').on('click', 'button', function(e){     

  var selected = $(this).attr('value');

  console.log(selected);
});