I'm building an interface for marking dates on a calendar as being booked. The user 'paints' on the dates they want to mark as booked.
here's how it looks:

here are the functions:
function load_red_paint(){
$('td').bind('mousedown', function(){
$(this).addClass('booked');
$('td').bind('mouseenter', function(){
$(this).addClass('booked');
});
unbind_brush();
})
}
function unbind_brush(){
$('td').bind('mouseup', function(){
$('td').unbind('mouseenter');
});
$('table').bind('mouseleave', function(){
$('td').unbind('mouseenter');
});
}
the problem:
My unbind_brush() function works great except for if the user mouseup's outside of the calendar, in which case on returning to the calendar the brush is still 'painting'. I tried to fix this my also unbinding on mouseleave of that calendar with this bit:
$('table').bind('mouseleave', function(){
$('td').unbind('mouseenter');
});
but with no joy, am i missing something obvious?!!!
edit: added html:
<div class="table_wrap">
<p class="table_title">Apr</p>
<table cellpadding='10'>
<tr class="col_titles">
<td>S</td>
<td>S</td>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
</tr>
<tr>
<td class='indent'> </td><td class='indent'> </td><td class='indent'> </td><td class='indent'> </td><td class='indent'> </td><td id='1270080000' class='past '> 01 </td><td id='1270166400' class='past '> 02 </td></tr><tr><td id='1270252800' class='past '> 03 </td><td id='1270339200' class='past '> 04 </td><td id='1270425600' class='past '> 05 </td><td id='1270512000' class='past '> 06 </td><td id='1270598400' class='past '> 07 </td><td id='1270684800' class='past '> 08 </td><td id='1270771200' class='past '> 09 </td></tr><tr><td id='1270857600' class='past '> 10 </td><td id='1270944000' class='past '> 11 </td><td id='1271030400' class='past '> 12 </td><td id='1271116800' class='past '> 13 </td><td id='1271203200' class='past '> 14 </td><td id='1271289600' class='past '> 15 </td><td id='1271376000' class='past '> 16 </td></tr><tr><td id='1271462400' class='past '> 17 </td><td id='1271548800' class='past '> 18 </td><td id='1271635200' class='past '> 19 </td><td id='1271721600' class='hand today '> 20 </td><td id='1271808000' class='hand '> 21 </td><td id='1271894400' class='hand '> 22 </td><td id='1271980800' class='hand '> 23 </td></tr><tr><td id='1272067200' class='hand '> 24 </td><td id='1272153600' class='hand '> 25 </td><td id='1272240000' class='hand '> 26 </td><td id='1272326400' class='hand '> 27 </td><td id='1272412800' class='hand '> 28 </td><td id='1272499200' class='hand '> 29 </td><td id='1272585600' class='hand '> 30 </td></tr><tr> </tr>
</table>