Question

我今天遇到了一个有趣的问题。我有画布元素，我存储在'模板'中。我克隆了这个模板，然后将它附加到我的文档中。

这很好用，除了我需要在将它们附加到DOM之后手动绘制画布，如果我在模板中这样做它们不再可克隆并且jQuery似乎失去了克隆它们的能力。

我不知道这种情况的任何特定的准备事件。

示例代码：

var template = $("<canvas></canvas");

var clone = template.clone();
var canvas = $("canvas",clone)[0];
var context = canvas.getContext("2d");
context.beginPath()
context.moveTo(center[0],center[1]);
context.arc( 50, 50, 25, 0, Math.PI, false );
context.lineTo( 25, 25 );
context.closePath();
context.fillStyle = "blue";
context.fill();

注意，我提供此代码作为示例，这不是我在我的应用程序中使用的。我可以画得很好，所以如果这段代码坏了，抱歉。

编辑：在OP的评论中发布问题

好的......

var template = $("<context>"); 
clone = template.clone(); 
$("body").append(clone); 
function cloneready(){ alert('clone exists); };

你去，在附加克隆时使cloneready执行。我想我将采用不同的路线并使用画布深层复制来完成这项工作。

Answer 1

如果要在DOM修改上触发代码，则没有本地跨浏览器事件。

然而a plugin called livequery可以做到这一点（当你使用jQuery方法进行DOM修改时）。

看起来像是：

$('canvas').livequery(function() { 
    alert('clone exists'); 
});

或者，当然，如果你已经有一个命名函数，就像这样：

function cloneready(){ alert('clone exists'); };

$('canvas').livequery( cloneready );

它还可以接受第二个函数参数，当从DOM中删除与选择器匹配的项时，该参数将被触发。

此外，如果添加一个类来匹配给定的选择器，.addClass()等方法将触发livequery选择器：

$('.someClass').livequery( function() {
    alert('new someClass');
});

$('div').addClass('someClass'); // The livequery code will fire

DOM准备好回调

1 个答案: