javascript - Mouseup to cancel all event under Mousedown -

i trying implement div resize code using jquery. see here.

for moves per mouse movement. codes here:

$('#top-left').mousedown(function(){     event.stoppropagation();     $(document).mousemove(function(event){         var current_width=$(".active").width();         var current_height=$(".active").height();         var position = $(".active").position();          var new_width=current_width+(position.left-event.pagex);          temp=$("#mouse").html();         $("#mouse").html(temp+"<br />new_width= "+new_width);          $(".active").css({top:event.pagey+"px"});         //$(".active").css({width:new_width+"px"});      }); }); $('#top-left').mouseup(function(){     event.stoppropagation(); }); 

i want when mouseup called, events registered current div.active gets removed. please let me know if not clear.

check jsfiddle here.

if want div.active have no events bound it, do: $('div.active').unbind()

for reference: unbind() api reference

additionally, since dealing elements being added dom, using .click() not work, when dealing dynamic elements, on() referenced here.

however, because elements dynamic, need use 'delegate' feature of on() method:

$( "parentelement" ).on( "click", "clickedelement", function() {     alert( $( ).text() );     console.log(this); // reference "clickedclicked", not "parentelement" }); 

in short, delgation works listening events bubble child element it's non-dynamic parent. so, since dynamic children's events bubble up, parent element receive clicks it's children elements.