title: How to bind and unbind events jquery: carousel script modification
body: <p>I have a jQuery Carousel script and I want to modify it's behavior slightly. Here is the script and test case in jsfiddle: <a href="http://jsfiddle.net/A4vHf/1/" rel="nofollow">http://jsfiddle.net/A4vHf/1/</a> . Below is the JS code.</p>
  
  <pre><code>(function($) {
  
      $.fn.easyPaginate = function(options){
  
          var defaults = {                
              step: 4,
              delay: 100,
              numeric: true,
              nextprev: true,
              auto:false,
              pause:4000,
              clickstop:true,
              controls: 'pagination',
              current: 'current' 
          }; 
  
          var options = $.extend(defaults, options); 
          var step = options.step;
          var lower, upper;
          var children = $(this).children();
          var count = children.length;
          var obj, next, prev;        
          var page = 1;
          var timeout;
          var clicked = false;
  
          function show(){
              clearTimeout(timeout);
              lower = ((page-1) * step);
              upper = lower+step;
              $(children).each(function(i){
                  var child = $(this);
                  child.hide();
                  if(i&gt;=lower &amp;&amp; i&lt;upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
                  if(options.nextprev){
                      if(upper &gt;= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
                      if(lower &gt;= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
                  };
              }); 
              $('li','#'+ options.controls).removeClass(options.current);
              $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);
  
              if(options.auto){
                  if(options.clickstop &amp;&amp; clicked){}else{ timeout = setTimeout(auto,options.pause); };
              };
          };
  
          function auto(){
              if(upper &lt;= count){ page++; show(); }           
          };
  
          this.each(function(){ 
  
              obj = this;
  
              if(count&gt;step){
  
                  var pages = Math.floor(count/step);
                  if((count/step) &gt; pages) pages++;
  
                  var ol = $('&lt;ol id="'+ options.controls +'"&gt;&lt;/ol&gt;').insertAfter(obj);
  
                  if(options.nextprev){
                      prev = $('&lt;li class="prev"&gt;Previous&lt;/li&gt;')
                          .hide()
                          .appendTo(ol)
                          .click(function(){
                              clicked = true;
                              page--;
                              show();
                          });
                  };
  
                  if(options.numeric){
                      for(var i=1;i&lt;=pages;i++){
                      $('&lt;li data-index="'+ i +'"&gt;'+ i +'&lt;/li&gt;')
                          .appendTo(ol)
                          .click(function(){  
                              clicked = true;
                              page = $(this).attr('data-index');
                              show();
                          });                 
                      };              
                  };
  
                  if(options.nextprev){
                      next = $('&lt;li class="next"&gt;Next&lt;/li&gt;')
                          .hide()
                          .appendTo(ol)
                          .click(function(){
                              clicked = true;         
                              page++;
                              show();
                          });
                  };
  
                  show();
              };
          }); 
  
      };  
  
  })(jQuery);
  </code></pre>
  
  <p>My goal is to make the <code>class="prev"</code> and <code>class="next"</code> buttons always visible. I removed the <code>hide();</code> methods from the code, but I also need to remove the click event handlers because otherwise I can still click on the buttons even when I'm on the last or first pages accordingly - and that's here things get messed up. I have to bind and unbind the click events but don't know how to do it properly. So here is my modified version:</p>
  
  <pre><code>(function($) {
  
  $.fn.easyPaginate = function(options){
  
      var defaults = {                
          step: 4,
          delay: 100,
          numeric: true,
          nextprev: true,
          auto:false,
          pause:4000,
          clickstop:true,
          controls: 'pagination',
          current: 'current' 
      }; 
  
      var options = $.extend(defaults, options); 
      var step = options.step;
      var lower, upper;
      var children = $(this).children();
      var count = children.length;
      var obj, next, prev;        
      var page = 1;
      var timeout;
      var clicked = false;
  
      function show(){
          clearTimeout(timeout);
          lower = ((page-1) * step);
          upper = lower+step;
          $(children).each(function(i){
              var child = $(this);
              child.hide();
              if(i&gt;=lower &amp;&amp; i&lt;upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
              if(options.nextprev){
                  if(upper &gt;= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
                  if(lower &gt;= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
              };
          }); 
          $('li','#'+ options.controls).removeClass(options.current);
          $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);
  
          if(options.auto){
              if(options.clickstop &amp;&amp; clicked){}else{ timeout = setTimeout(auto,options.pause); };
          };
      };
  
      function auto(){
          if(upper &lt;= count){ page++; show(); }           
      };
  
      this.each(function(){ 
  
          obj = this;
  
          if(count&gt;step){
  
              var pages = Math.floor(count/step);
              if((count/step) &gt; pages) pages++;
  
              var ol = $('&lt;ol id="'+ options.controls +'"&gt;&lt;/ol&gt;').insertAfter(obj);
  
              if(options.nextprev){
                  prev = $('&lt;li class="prev"&gt;Previous&lt;/li&gt;')
                      .appendTo(ol)
                      .bind('click', function() {
                          clicked = true;
                          page--;
                          show();
                      });
              };
  
              if(options.numeric){
                  for(var i=1;i&lt;=pages;i++){
                  $('&lt;li data-index="'+ i +'"&gt;'+ i +'&lt;/li&gt;')
                      .appendTo(ol)
                      .click(function(){  
                          clicked = true;
                          page = $(this).attr('data-index');
                          show();
                      });                 
                  };              
              };
  
              if(options.nextprev){
                  next = $('&lt;li class="next"&gt;Next&lt;/li&gt;')
                      .appendTo(ol)
                      .bind('click', function() {
                          clicked = true;         
                          page++;
                          show();
                      });
              };
  
              show();
          };
      }); 
  
  };  
  
  })(jQuery);
  </code></pre>