'jQuery resizable event does not end

I am making some interactive UI and using jQuery for resize and mouse events.

I bind mouseOver and click event for all elements and when I get a click, I remove the click listener (so that it does not interfere with the resizable listeners).

This works fine till here, now the selected element can be resized. starting the resize works fine, but even after mouseup, the element resize event does not end, its still getting resized, with the mouse.

What's wrong ?

The thing is located here.

http://parth.me/builderjs/index.html

The main parts are :

var
  inspect = true,           // to disable inspect
  selected = null;          // currently selected event

function clickhandler(e) {
  console.log('click');
  if (selected != null)return;     // if some div is already selected, then return
  if (e.which == 3)return;         // if it was right click, return
  selected = $(e.target);          // selected = the element which received the click
  inspect = false;                 // disable inspection
  selected.addClass('selected');   // add SELECTED background + border
  $(window).unbind('click', clickhandler);  // remove the click listener
  $('.selected').resizable();               // make the selected element resizable
}

$(window).bind('click', clickhandler);    //bind the click event

Esc key is bound to unselect any selection.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source