Jquery的綁定聽衆

Question

類

我有有像標籤一個HTML文檔：

<div class="sign"></div> 

我想用畫布表示的跡象視圖 （用戶可以touchmove並繪製），以取代那些標籤 所以我已經綁定了聽衆。

問題是隻有第一個畫布有監聽器，並且可以使用它。

$(document).ready(function() { 


    $('.sign').each(function() { 


     var canvas = $("<canvas/>"); 
     canvas[0].width = 200; 
     canvas[0].height = 100; 
     canvas[0].setAttribute("style", "border:1px solid #000000"); 

     var ctx = canvas.get(0).getContext('2d'); 
     ctx.strokeStyle = "rgba(0,0,0,1)"; 
     ctx.lineWidth = 2; 
     ctx.lineCap = 'round'; 

     $(this).append(canvas); 


     canvas.bind("touchstart", function() { 

      ctx.moveTo(event.touches[0].pageX, event.touches[0].pageY); 
     }); 

     canvas.bind("touchmove", function() { 
      ctx.lineTo(event.touches[0].pageX, event.touches[0].pageY); 
      ctx.stroke(); 
     }); 

     var br = $("<br/>"); 
     $(this).append(br); 

     var btn = document.createElement('input'); 
     btn.setAttribute("type", "button"); 
     btn.setAttribute("value", "Clear"); 
     btn.setAttribute("onclick", "clearSignature()"); 

     $(this).append(btn); 

    }); 

}); 

我該如何將這些監聽器綁定到所有畫布？

謝謝。

Answer 1

我會刪除each()循環內的bind，我會簡單地在它之後附加處理程序（使用事件委託），例如，

$('body') 
    .on("touchstart", 'canvas', function() { 
    var ctx = this.getContext('2d'); 
    ctx.moveTo(event.touches[0].pageX, event.touches[0].pageY); 
    }) 
    .on("touchmove", 'canvas', function() { 
    var ctx = this.getContext('2d'); 
    ctx.lineTo(event.touches[0].pageX, event.touches[0].pageY); 
    ctx.stroke(); 
    }); 

假設情況下應與var ctx = this.getContext('2d');