Div dynamique hérite pas du JS

Bonjour,

Sur une page web je crée dynamiquement un ensemble de div quand on clic sur un bouton.

Code:

---

1 2 3 4 5

function ajouter(nom_objet){ valueDiv = $('#detail').val(); valueDiv = valueDiv + '<div class="draggable"><img class="img_objet" src="img/arbre_1.png" /></div>'; $('#detail').html(valueDiv); }

---

Le problème c'est qu'il n'hérite pas de ma classe "draggable"

Code:

---

1 2 3 4 5

$(function() { $(".draggable" ).draggable({ cursor: "crosshair" }); });

---

Comment "lier" ce code js à quelque chose crée en dehors du chargement de la page ?

Merci

un classique pourtant

voir on() ou delegate()

ex: http://jsfiddle.net/4aGwY/2/

Merci, j'ai vu avec le "On" mais j'ai pas réussi a le mettre en place...

Avec :

Code:

---

1 2 3

$("#terrain_detail").on("click", "img", function(event){ alert('on'); });

---

j'ai bien le message "on" par contre c'est pour affecter ma fonction draggable..

Code:

---

1 2 3 4 5

$(function() { $(".draggable").draggable({ cursor: "crosshair" }); });

---

J'ai essayé en indiquant le nom de la fonction ou autre .. sans succès ..

Merci

Code:

---

1 2 3

$("#terrain_detail").on("mouseenter", ".draggable", function(){ $(this).draggable(); });

---

sinon ajoute le draggable au moment de la création

Code:

---

1 2 3 4 5

function ajouter(nom_objet){ $('#detail').html($('#detail').val()) .append( $('<div/>').addClass('draggable').draggable().append('<img/>').attr({"class":"img_objet","src":"img/arbre_1.png"}) )   }

---

Bonsoir

Pour les widgets UI, je crois qu'il n'y a qu'une seule solution, détruire (destroy) et reconstruire.

Le cas a déjà été abordé plusieurs fois sur le forum, par exemple : http://www.developpez.net/forums/d10...-deja-chargee/

Citation:

---

Envoyé par SpaceFrog

Code:

---

1 2 3

$("#terrain_detail").on("mouseenter", ".draggable", function(){ $(this).draggable(); });

---

---

Bonjour,
Merci cela fonctionne parfaitement :)

Par contre mon code ajouté dynamiquement est comme ceci:

Code:

---

1 2 3 4

<div id="id-draggable" class="div-draggable draggable unselectable"> <img class="img-objet" src="img/arbre_1.png" /> <div class="resize"></div> </div>

---

Ton code marche pour le draggable par contre les evenements que j'ai sur $('.resize').mousedown, .. ne fonctionne plus aussi.

Et ce code ne change rien alors que ca marche pour le draggable..

Code:

---

1 2 3

$("#terrain_detail").on("mouseenter", ".resize", function(){ $(this).addClass('resize'); });

---

Merci

mousedown != mouseenter ...

je triche en appliquant le draggable sur le mousenter ...

applique egalement le mousedown sur le mousenter ...

Oui dans mon copié coller pour le poste j'ai oublié de modifier, mais j'ai bien ce code qui ne marche pas :)

Code:

---

1 2 3

$("#terrain_detail").on("mousedown", ".resize", function(){ $(this).addClass('resize'); });

---

ou encode..

Code:

---

1 2 3

$("#div_canvas").on("mouseenter", ".resize", function(){ $(this).mousedown(); });

---

et pourtant rien ne change :'(

il est ou ce div? dasn quoi ? ajouté quand et comment ?

Les div que j'ajoute son contenu dans un seul div (id="div_canvas").
Quand je clic sur un bouton j'ai dans le onClick="ajouter_image('test')".

Voici le code de la fonction qui ajoute

Code:

---

1 2 3 4 5

function ajouter_image(nom_image){ nbrImage = nbrImage + 1;   $('#div_canvas').append('<div id="id-draggable-' + nbrImage + '" class="div-draggable draggable unselectable"><img class="img-objet" src="img/' + nom_image + '.png" /><div class="resize"></div></div>'); }

---

Et du coup sur le div ajouté j'ai ces 3 fonctions qui ne marche plus.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$('.draggable').mousedown(function() { $(this).addClass('img-draggable-contour'); });   $('.draggable').mouseup(function() { $(this).removeClass('img-draggable-contour'); });   $('.resize').mousedown(function(e) { idParent = $(this).parents("div")[0].id;   $('#' + idParent).draggable('disable');   xDepart = e.pageX - $('#div_canvas').offsetLeft; yDepart = e.pageY - $('#div_canvas').offsetTop;   bResize = true; });

---

Ce code ne devrait il pas fonctionner ?

Code:

---

$("#div_canvas").on("mousedown", ".resize", $('.resize').mousedown()));

---

Code:

---

$("#div_canvas").on("mousedown", ".resize", function(){$('.resize').trigger("mousedown")});

---

Quand je test Chrome est littéralement HS avec page bleu et "une erreur s'est produite.. " :(

Voici mon code:

Code:

---

1 2 3

$("#div_canvas").on("mousedown", ".draggable", function(){$('.draggable').trigger("mousedown")}); $("#div_canvas").on("mouseup", ".draggable", function(){$('.draggable').trigger("mouseup")}); $("#div_canvas").on("mousedown", ".resize", function(){$('.resize').trigger("mousedown")});

---

Code:

---

$("#div_canvas").on("mousedown", ".draggable", function(){$('.draggable').trigger("mousedown")});

---

Quand tu fais ça, la ligne $('.draggable').trigger("mousedown") fait que tu simules un mousedown sur tous les éléments ayant la classe draggable (et idem pour les lignes suivantes), je comprends que Chrome trouve ça un peu lourd à traiter ! :aie:

Arf.. du coup je vois plus trop comment résoudre mon problème.. :'(

En lisant la doc sur l'objet event. :aie:

Code:

---

$("#div_canvas").on("mousedown", ".draggable", function(e){$(e.target).trigger("mousedown")});

---

J'avais essayé mais j'ai toujours la meme erreur et cela ne marche pas :aie:

Citation:

---

Uncaught RangeError: Maximum call stack size exceeded

---

tu rentres dans une boucle infinie d'attribution de mousedown sur le mousedown ...

plutot que de créer les evenements dynamiquement ...
essaye d'avoir un element sur la âge avec les évenements et de le cloner avec jquery ...

Huuh :(
C'est quand même complexe simplement pour appliquer un évènement.. :)