DOM prêt callback

Question

J'ai rencontré un problème intéressant aujourd'hui. J'ai des éléments de toile que je stocke dans un 'modèle'. Je clone ce modèle puis l'ajoute à mon document. Cela fonctionne très bien, sauf que j'ai besoin de dessiner le canevas manuellement après qu'ils ont été ajoutés au DOM, si je le fais dans le modèle, ils ne sont plus clonables et jQuery semble perdre la capacité de les cloner. Je n'ai pas connaissance d'événements prêts spécifiques pour ce genre de cas.

code Exemple:

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

Remarque, j'ai fourni ce code comme échantillon, ce n'est pas ce que je me sers dans ma demande. Je peux très bien dessiner des toiles, donc si ce code est cassé, désolé.

---

EDIT: ajout d'affichage à la question du commentaire de l'OP

bien ...

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

Il vous allez, assurez exécuter cloneready quand clone a été ajouté. Je pense que je vais aller un chemin différent et utiliser une copie profonde de toile pour faire ce travail.

Answer 1

Si vous souhaitez déclencher le code sur la modification du DOM, il n'existe aucun événement natif pour tous les navigateurs.

Il existe cependant a plugin called livequery qui peut le faire (lorsque vous effectuez des modifications DOM en utilisant les méthodes jQuery).

Il ressemblerait à quelque chose comme:

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

Ou, bien sûr, si vous avez déjà une fonction nommée, comme ceci:

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

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

Il peut également accepter un second argument de fonction qui se déclenche lorsqu'un élément correspondant au sélecteur est supprimé du DOM.

De plus, des méthodes telles que .addClass() déclenchera un sélecteur livequery si vous ajoutez une classe pour correspondre au sélecteur donné:

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

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