MouseUp이 mousemove jQuery 이후에 실행되지 않음

Question

여기에이 문제의 배열이 있으며이를 수정 프로그램으로 구현하려고 시도했지만 해결 방법이 없습니다.

여기 http://jsfiddle.net/OwenMelbz/RjYnM/

문제는 당신이 상자를 드래그 한 후, 당신이 MouseUp 이벤트를 등록하는 것 전에 클릭해야하는 바이올린 설정을 가지고있다. 여기

는)}

$(function() { 
var pageID = document.location.pathname; 
var defaultMarkup = document.documentElement.innerHTML; 

$('.feedback-menu').attr('data-pageId', pageID); 

$('.feedback-tab').click(function() { 
    var state = $(this).attr('data-state'); 

    if (state == "closed") { 
     $(this).attr('data-state', 'open'); 
     $('.feedback-menu').animate({ 
      'right': '-1px' 
     }); 
     $('.feedback-tab').animate({ 
      'right': '100px' 
     }); 
    } 
    else { 
     $(this).attr('data-state', 'closed'); 
     $('.feedback-menu').animate({ 
      'right': '-102px' 
     }); 
     $('.feedback-tab').animate({ 
      'right': '-1px' 
     }); 
    } 
}); 

$('body').append("<div class='feedback-overlay' style='display:none;'></div>"); 

$('.feedback-btn').live('click', function() { 
    setupCanvas(); 
}); 

var setupCanvas = function() { 
    var overlayMarkup = "<div class='feedback-overlay'></div>"; 
    var docHeight = $(document).outerHeight(); 
    var docWidth = $(document).outerWidth(); 


    $('.feedback-overlay').css({ 
     'width': docWidth, 
     'height': docHeight, 
     'display': 'block' 
    }); 

}; 

var startDrawing = function() { 
    initDraw(); 
}; 

window.bugID = 0; 
window.canvas = $('.feedback-overlay'); 

canvas.live('mousedown', function(e) { 

    if(e.target != this){ return true; } 

    bugID++; 

    window.click_y = e.pageY; 
    window.click_x = e.pageX; 


    canvas.append('<div class="selection-box" id="bugID-' + bugID + '"></div>'); 

    window.bugBox = $('#bugID-' + bugID); 

    bugBox.css({ 
     'top': click_y, 
     'left': click_x, 
     'width': 0, 
     'height': 0 
    }); 

    canvas.mousemove(function(e) { 

     var move_x = e.pageX, 
      move_y = e.pageY, 
      width = Math.abs(move_x - click_x)-10, 
      height = Math.abs(move_y - click_y)-10; 

     bugBox.css({ 
      'width': width, 
      'height': height 
     }); 
     if (move_x < click_x) { //mouse moving left instead of right 
      bugBox.css({ 
       'left': click_x - width 
      }); 
     } 
     if (move_y < click_y) { //mouse moving up instead of down 
      bugBox.css({ 
       'top': click_y - height 
      }); 
     } 
     return false; 
    }); 

    canvas.one('mouseup', function(e) { 

     bugBox.draggable().resizable(); 
     if (bugBox.width() < 50 || bugBox.height() < 50) { 
      bugBox.remove(); 
     } 
     $().unbind(); 
     }); 

     return false; 
}); 

(죄송 많이있다)이 JS입니다

Answer 1

마우스까지 방법에 $(this).unbind();을 사용해보십시오 :

canvas.one('mouseup', function(e) { 
    console.log("a"); 
    bugBox.draggable().resizable(); 
    if (bugBox.width() < 50 || bugBox.height() < 50) { 
     bugBox.remove(); 
    } 
    $(this).unbind(); 
    }); 

업데이트 바이올린 : http://jsfiddle.net/johnkoer/RjYnM/5/

를

추 신 : 라이브는 사용되지 않으므로 012를 사용하도록 이동해야합니다.