Binding mousemove within mousedown function with jQuery

Question

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.

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

});

The important part of the HTML looks like this

<div id="main">
    <div class="statusbar">
        <p class="position"></p>
    </div>
</div>

Firebug says that the bind methods are undefined on the variable sbar within handleMouseDown and handleMouseUp. The firebug console prints out <div class="statusbar"> for the line commented //firebug.

I'm doing something wrong, probably when binding the mousedown and mouseup... but what?! I'm using jQuery v1.4.2, if that helps?

Answer 1

.bind() and .unbind() are jQuery functions, so you need a slight adjustment , instead of this:

    sbar.bind('mousemove', function(event){
        handleMouseMove(event, sbar);
    });

You need this (wrap it as a jQuery object):

    $(sbar).bind('mousemove', function(event){
        handleMouseMove(event, sbar);
    });

The same for the .unbind():

$(sbar).unbind('mousemove');

You can see a working demo with only those corrections here :)