CODEWITHSUNDEEP
javascripttwitter-bootstrappager
Jules
Jules

Reputation: 143

bootstrap pager onclick event

I have pretty new to bootstrap and totally new to the pager option. I have a page that works with bootstrap buttons with click events in javascript. I am trying to implement this with the pager option. Below is just a quick example of one of the options and what I want the javascript to do. I cant seem to make it do anything and if I add button class to it, the align totally goes to pot! Thanks

The html is :

<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">   
<ul class="pager">
  <li class="previous"><a href="#">Back</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>
</div>

and the javavscript I would like to run when either of the buttons is clicked is :-

$(document).ready(function() {
   $('#next').on('click', function() {
      $('#box1').hide(); 
      $('#box2').show();
   })
});

Upvotes: 0

Views: 1235

Answers (2)

eisbach
eisbach

Reputation: 417

Try like this;

<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-
    xs-offset-1">   
    <ul class="pager">
    <li id="previous" class="previous"><a href="#">Back</a></li>
    <li id="next" class="next"><a href="#">Next</a></li>
    </ul>
</div>




 $(document).ready(function() {
    $('#previous').on('click', function() {
        $('#box2').hide(); 
        $('#box1').show();
    });

    $('#next').on('click', function() {
        $('#box1').hide(); 
        $('#box2').show();
    }); });

Upvotes: 1

heylookltsme
heylookltsme

Reputation: 124

You're adding the click handler to an element with an id of next, but in your html, next is a class name.

Change your js to - 

$(document).ready(function() {
   $('.next').on('click', function() {
      $('#box1').hide(); 
      $('#box2').show();
   })
});

Upvotes: 2

Related Questions