Javascript KineticJS.on（）不处理克隆形状

我正在制作一个可编辑的模式，用户可以使用和重用它来制作一个更大的模式。 当用户将第一个小模式拖动到大模式网格中时，我将其克隆，添加到另一层，让用户重用或编辑它。 克隆的节点仍然是可编辑和可拖动的，但绑定的事件不会通过交互触发。 这是我的密码：

 var B = A = new Kinetic.Shape();
 var stage = new Kinetic.Stage({
    container: 'container',
    width: 1000,
    height: 650
  });
 var Alayer = new Kinetic.Layer();
 var Blayer = new Kinetic.Layer();

 var BGrid = new Kinetic.Group();

for(var v = 0; v < 4; v++){
for(var h = 0; h < 4; h++){
    (function(){
        var grid = new Kinetic.Rect({
            x: 300 + (h * 120),
            y: 50 + (v *120),
            width: 120,
            height: 120,
            stroke: 'black',
            strokeWidth: 1,
            listening: false
        });
        BGrid.add(grid);
    })();  
 }

}

(function() {
  var AS = new Kinetic.Rect({
    x: 150,
    y: 110,
    width: 120,
    height: 120,
    draggable:true,
    stroke: 'black',
    strokeWidth: 1,
    offset: [60,60],
    });
B = AS;
Alayer.add(B);
})();

Blayer.add(BGrid);


stage.add(Blayer);
stage.add(Alayer);

Blayer.on('click', function(evt) {
 B = evt.targetNode;
 B.setStroke('red');

});
B.on('dragend',function(){
   var px = B.getX();
   var py = B.getY();
//some code that's not executing
});
A.on('dragend',function(){
var sx = A.getX();
var sy = A.getY();
if((300 < sx && sx < 780) && (50 < sy && sy < 530)){
    A.moveTo(Blayer);
    B = A;
    var C = A.clone();
    C.setPosition(150,110);
    Alayer.add(C);
    A = C;
}else{
    A.setPosition(150,110);
}
Alayer.draw();
Blayer.draw();
});

var B=A=new dynamic.Shape（）；
var阶段=新的动力学阶段({
容器：'容器'，
宽度：1000，
身高：650
});
var Alayer=新的动能层（）；
var Blayer=新的动能层（）；
var BGrid=new dynamic.Group（）；
对于（var v=0；v<4；v++）{
对于（var h=0；h<4；h++）{
（功能（）{
var grid=新的动能.Rect({
x:300+（高*120），
y:50+（v*120），
宽度：120，
身高：120，
笔画：“黑色”，
冲程宽度：1，
听：错
});
BGrid.add（网格）；
})();  
}
}
（功能（）{
var AS=新的动能.Rect({
x:150，
y:110，
宽度：120，
身高：120，
真的，
笔画：“黑色”，
冲程宽度：1，
偏移量：[60,60]，
});
B=AS；
A.添加（B）；
})();
添加（BGrid）；
阶段。添加（Blayer）；
阶段。添加（Alayer）；
Blayer.on（'click'，函数（evt）{
B=evt.targetNode；
B.调整行程（“红色”）；
});
B.on（'dragend'，function（）{
var px=B.getX（）；
var py=B.getY（）；
//一些没有执行的代码
});
A.on（'dragend'，function（）{
var sx=A.getX（）；
var sy=A.getY（）；
如果（（300

我非常感谢您的帮助。

您有打字错误：

B.on('dragend',function(){
  var px = B.getX();
  var py = B.getY();   // not b.getY();
  alert("dragend!");
  //some code that's executing
});

---

这是我提出的解决方案，不确定它是否对任何人都有帮助，但我希望它确实有帮助

stage.on('dragend',function(e){
var t = e.targetNode;
var n = t.getName();
var sx = t.getAbsolutePosition().x;

if(300 < sx && sx < 780 && n == 'A'){

    //previous code for A

}else if(300 < sx && sx < 780 && n != 'A'){

    //previous code for B

}else if(n == 'A'){

    t.setAbsolutePosition(150,110);

}else{

    t.remove();
}
stage.draw();
});`

stage.on（'dragend'，函数（e）{
var t=e.targetNode；
var n=t.getName（）；
var sx=t.getAbsolutePosition（）.x；
如果（300

当我缩短代码时输入了拼写错误，所以这不是问题所在。由于某些原因，.on（）不止一次工作。您的JSFIDLE只在第一个dragstart上工作，不会克隆形状。但我想我已经明白了。目前正在编辑我的代码，不久将发布最终结果。谢谢