DOM готов перезвонить

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();

Обратите внимание, я предоставил этот код в качестве примера, это не то, что я использую в своем приложении. Я могу отлично рисовать холсты, так что если этот код не работает, извините.

---

РЕДАКТИРОВАТЬ: опубликовать дополнение к вопросу из комментария ОП

хорошо ...

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

Вот, пожалуйста, заставьте cloneready выполнить, когда клон добавлен. Я думаю, что пойду другим путем и использую глубокое копирование холста, чтобы сделать эту работу.

Answer 1

Если вы хотите вызвать код при модификации DOM, для этого не существует встроенного кросс-браузерного события.

Однако есть плагин с именем livequery, который может это сделать (когда вы делаете модификации DOM с помощью методов jQuery).

Это будет выглядеть примерно так:

$('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