マウスアップはマウス操作の後に起動されません

Question

マウスアップはマウス操作の後にアクティブ化されません。なぜ私は分からない。しかし、行のコメントを外すと、

$(this).replaceWith("<div class=" + "'" + $canvas.replace(".", " ") + "'" + "></div>"); 

が正常に動作します。要素がページにもはやであるため、mouseupイベントは実行することはできません - ここにあなたが、その後mousemoveイベントに置き換えるDOM要素にmouseupイベントを結合しているコード

var onmousemove = function ($canvas) { 
     // Painting the map with canvas 
     $map_canvas.mousedown(function() { 
      var ignoreMouseMove = false; 
      mouseDownFired = true; 



      $(".map .row div").mousemove(function (e) { 

       if (ignoreMouseMove) return; 
       //$(this).replaceWith("<div class=" + "'" + $canvas.replace(".", " ") + "'" + "></div>"); 

       moveCanvas($canvas, e) 
      }).mouseup(function() { 
       ignoreMouseMove = true; 
      }); 


     }); 

     var paletteClone = $(document).clone(true);  // bound handler for .palette div 

}; 



var moveCanvas = function ($canvas, e) { 
    $(".map ul li." + $canvas).offset({ 
     left: e.pageX - 30, 
     top: e.pageY - 30 
    }); 
}; 

Answer 1

の一部です。これは親にイベントをバインドする代わりに、あなたが期待するような行動を取得し、まだ追加された要素 -

代替は.map .rowの親を使用してon機能を使用してmouseupイベントをバインドすることです。

var onmousemove = function ($canvas) { 
    // Painting the map with canvas 
    $map_canvas.mousedown(function() { 
     var ignoreMouseMove = false; 
     mouseDownFired = true; 

     $(".map .row").on("mousemove", "div", (function (e) { 

      if (ignoreMouseMove) return; 

      // this is now OK - event bound to parent 
      $(this).replaceWith("<div class=" + "'" + $canvas.replace(".", " ") + "'" + "></div>"); 

      moveCanvas($canvas, e) 
     }).on("mouseup", "div", function() { 
      ignoreMouseMove = true; 
     }); 


    }); 

    var paletteClone = $(document).clone(true);  // bound handler for .palette div 

}; 



var moveCanvas = function ($canvas, e) { 
    $(".map ul li." + $canvas).offset({ 
     left: e.pageX - 30, 
     top: e.pageY - 30 
    }); 
};