Unbind mouseup?

Question

I am trying to unbind the mouseup event from an element. I have tried the following but none are working.

$('#myElm').unbind('mouseup');
$('#myElm').unbind('onmouseup');
$('#myElm').unbind('click');

How do you unbind an event assigned using $('#myElm').mouseup(function({...}); ???

Edit: Adding full code

cacheBgArea.mouseup(function(){
      var $cursorInElm = $(cacheBgArea.selectedText().obj);
      var selectFontSize = parseInt($cursorInElm.css('fontSize')), selectFontFace = $cursorInElm.css('fontFamily');
      $fontSizeSlider.slider('value', selectFontSize);

      $chooseFontFace.find('option').each(function(){
         var $this = $(this);
         if ($this.val() == selectFontFace) {
            $this.attr('selected', true);
            return false;
         }
      });
      log('font weight: ' + $cursorInElm.css('fontWeight'));
      if ($cursorInElm.css('fontWeight') == 'bold' || $cursorInElm.css('fontWeight') == 401) {
         $boldCheckbox.attr('checked', true).change();
      } else {
         $boldCheckbox.attr('checked', false).change();
      }

      var objText = cacheBgArea.selectedText();
      if (objText.obj.nodeName == 'a' || objText.obj.nodeName == 'A') {
         $cursorInElm = $(objText.obj)
         var elmsHref = $cursorInElm.attr('href');
         if (elmsHref && elmsHref != '#') {
            $enterOwnLink.val(elmsHref).show();
            $switchToPage.show();
            $chooseLinkPage.hide();
            $chooseLinkTitle.html('Enter a Web Address');
         } else if ($cursorInElm.attr('linkPageId')) {
            $chooseLinkPage.find('option').each(function(){
               var $this = $(this);
               if ($this.val() == $cursorInElm.attr('linkPageId')) {
                  $this.attr('selected', true);
                  return false;
               }
            });
            $enterOwnLink.hide();
            $switchToPage.hide();
            $chooseLinkPage.show();
            $chooseLinkTitle.html('Choose a Page');
         }
      } else {
         $('#noneLink').attr('selected', true);
         $enterOwnLink.hide();
         $switchToPage.hide();
         $chooseLinkPage.show();
         $chooseLinkTitle.html('Choose a Page');
      }
   });

I have verified that cacheBgArea in indeed defined. Yes, the event is bound before the unbind is called. This is the unbind. (log is just my shorthand for console.log();)

log('cacheBgArea.length: ' + cacheBgArea.length);
cacheBgArea.unbind('mouseup');//TODO: fix this, not unbinding...

*When* is the unbind being called? That seems to be the problem area. — Nick Craver, Aug 13 '10 at 15:32
@Nick - I have a bottom slide-in panel. The mouseup is bound when it opens. The unbind is called when it closes. I get the log message so I can tell the unbind is being called when it closes and that cacheBgArea is still defined. — Mechlar, Aug 13 '10 at 15:34

score 10 · Accepted Answer · answered Aug 13 '10 at 15:23

10

This should be working:

$('#myElm').unbind('mouseup');

Can you post your complete bind code? Also, are you sure this is running after the .mouseup() ran?

.mouseup(func) is a shortcut for .bind('mouseup', func) so the match unbind is .unbind('mouseup') (note this unbinds all of the mouseup handlers, not just the anonymous function, you'll need a named function if you want to remove a specific handler).

answered Aug 13 '10 at 15:23

Nick Craver

623,446
136
1,297
1,155

K, I added the full code. The way I can tell that the event is still bound is because I still get new log messages on mouseup after I unbind it. – Mechlar Aug 13 '10 at 15:31
@Dale - When are you calling `.unbind()`? I don't see it in your code, it's in a separate chunk, do you have a page link by chance? – Nick Craver Aug 13 '10 at 15:34
@Nick - Its at the very bottom of my question in a separate code chunk. (right above the tags) – Mechlar Aug 13 '10 at 15:35
@Dale - Right...the point is that code chunk has no context, I have no idea where it's being called from :) – Nick Craver Aug 13 '10 at 15:47
@Nick - The unbind function is in its own js file that is loaded when the page loads. The bottom panel is loaded via ajax. The bind function is called when the ajax loads the panel. The function that closes the bottom panel is the function that unbinds the mouseup event. The element being bound is not in the bottom panel. Everything works right (closing, opening, binding, etc), except the event not being unbound at close. – Mechlar Aug 13 '10 at 15:57
In most situations your answer would suffice. My reason for my bug I'm sure is more complicated than a discussion on whether or not $('#myElm').unbind('mouseup'); works. Therefore, your answer would be most correct. Thanks – Mechlar Aug 16 '10 at 19:46

Unbind mouseup?

1 Answers1

Linked