代码之家 › 专栏 › 技术社区 › Drew

DOM就绪回调

javascript-events jquery

1

Drew · 技术社区 · 15 年前

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

这很好,只是在画布被附加到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执行。我想我会走另一条路,用画布深度复制来完成这项工作。

1 回复 | 直到 15 年前

1

user113716 15 年前

如果您想在修改dom时触发代码,就没有本机跨浏览器事件。

但是 a plugin called livequery 这可以做到(当您使用jquery方法修改DOM时)。

它看起来像:

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

或者,当然,如果您已经有了一个命名函数,比如:

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

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

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

此外,方法如 .addClass() 将触发一个 活体查询 选择器如果添加一个类以匹配给定的选择器:

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

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