JQuery Listener on Canvas Child doesn't work

i have a problem i'm implementing a crop custom rectangle on a canvas i made a function in Javascript that when the crop function is called the create on existing canvas a child and then with the JQuery listener i draw the rectangle.The childNode is create correctly while the listener don't work they don't get the events. This is my code:

var dragging = false;
var xstart = 0;
var ystart = 0;
var width = 0;
var height = 0;
var ctxotmp = null;
var ctxtmp = null; 
var canvastmp = null;
var mycanvas = null;
function draw() {
 ctxtmp.fillRect(xstart, ystart, width, height);
}

function init() {
    mycanvas = $('#mycanvas')[0];
   // create temp canvas
    canvastmp = document.createElement('canvas');
    canvastmp.id = "mycanvastmp";
    canvastmp.width = mycanvas.width;
    canvastmp.height = mycanvas.height;
    mycanvas.parentNode.appendChild(canvastmp);
    $("#mycanvastmp").css({position:"absolute",top:$("#mycanvas").css("top"),left:$("#mycanvas").css("left")});
    canvastmp = $('#mycanvastmp')[0];
   ctxtmp = canvastmp.getContext('2d');
   ctxtmp.lineWidth = 1;
   ctxtmp.fillStyle = "rgba(0, 0, 0, 0.5)";
}
//listener
$('#mycanvastmp').mousedown(function(e) {
    var xoffs = $(this).offset().left;
    var yoffs = $(this).offset().top;
    xstart = e.pageX - xoffs;
    ystart = e.pageY - yoffs;
    dragging = true;
  });

  $('#mycanvastmp').mousemove(function(e) {
    if(dragging) {
      var xoffs = $(this).offset().left;
      var yoffs = $(this).offset().top;
      width = e.pageX - xoffs - xstart;
      height = e.pageY - yoffs - ystart;
      ctxtmp.clearRect(0, 0, $(this).width(), $(this).height());
      draw();
    }
  });

  $('#mycanvastmp').mouseup(function() {
    dragging=false;
    alert('The rectangle for crop (x, y, width, height): ' + xstart + ', ' + ystart + ', ' + width + ', ' + height);
  });

Someone can help me?

Answers


Looks like you're attaching the events before the temp canvas is created. Either attach the events in the init() function after adding the temp canvas to the DOM or use .delegate() or .on()

$("#mycanvas").on("mouseup", "#mycanvastmp", function() {
    //...
});

You need to use .on on method in order to bind events to dynamically created objects. When your page initially loads and the dom fires, it doesn't see tempCanvas so it doesn't attach them initially.

//listener
$('body').on('mousedown' ,'#mycanvastmp', function(e) {

    var xoffs = $(this).offset().left;
    var yoffs = $(this).offset().top;
    xstart = e.pageX - xoffs;
    ystart = e.pageY - yoffs;
    dragging = true;
  });

  $('body').on('mousemove' ,'#mycanvastmp', function(e) {
    if(dragging) {
      var xoffs = $(this).offset().left;
      var yoffs = $(this).offset().top;
      width = e.pageX - xoffs - xstart;
      height = e.pageY - yoffs - ystart;
      ctxtmp.clearRect(0, 0, $(this).width(), $(this).height());
      draw();
    }
  });

 $('body').on('mouseup' ,'#mycanvastmp', function(e) {
    dragging=false;
    alert('The rectangle for crop (x, y, width, height): ' + xstart + ', ' + ystart + ', ' + width + ', ' + height);
  });

init();

Live Demo


Need Your Help

How to remove clickHandler which already added to Label?

java gwt click handler

I am using GWT/JAVA for development. I have following problem: