jquery DOM就绪回调

q3qa4bjr  于 2022-12-18  发布在  jQuery
关注(0)|答案(1)|浏览(119)

我今天遇到了一个有趣的问题。我有画布元素,我存储在一个'模板'。我克隆这个模板,然后把它附加到我的文档。
这很好用,除了我需要在它们被附加到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在克隆被追加后执行。我想我会走一条不同的路线,使用画布深度复制来完成这项工作。

qvsjd97n

qvsjd97n1#

如果要在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

相关问题