title: Binding mousemove within mousedown function with jQuery
body: <p>I am trying to bind a mousemove event to a div when the left mousebutton is down, and unbind when it is released. This code should be fairly self-explainatory.</p>
  
  <pre><code>function handleMouseDown(e, sbar){
      if (e.button == 0){
          console.log(sbar); //firebug
          sbar.bind('mousemove', function(event){
              handleMouseMove(event, sbar);
          });
      }
  }
  
  function handleMouseUp(e, sbar){
      sbar.unbind('mousemove');       
  }
  
  function handleMouseMove(e, sbar){
      // not sure it this will work yet, but unimportant
      $(".position").html(e.pageX);
  }
  
  $(document).ready(function (){
  
      var statusbar = $(".statusbar");
  
      statusbar.mousedown(function(event){
          handleMouseDown(event, this);
      });
  
      statusbar.mouseup(function(event){
          handleMouseUp(event, this);
      });
  
  });
  </code></pre>
  
  <p>The important part of the HTML looks like this</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div class="statusbar"&gt;
          &lt;p class="position"&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Firebug says that the bind methods are undefined on the variable <em>sbar</em> within handleMouseDown and handleMouseUp.
  The firebug console prints out <code>&lt;div class="statusbar"&gt;</code> for the line commented <em>//firebug</em>.</p>
  
  <p>I'm doing something wrong, probably when binding the mousedown and mouseup... but what?!
  I'm using jQuery v1.4.2, if that helps?</p>