JQuery Listener on Canvas Child doesn't work

Question

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?

Answer 1

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

Answer 2

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() {
    //...
});