Discussion :

[Invité]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

un classique pourtant

voir on() ou delegate()

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

[Invité]

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

Avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

sinon ajoute le draggable au moment de la création

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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"}) )
 
}

[danielhagnoul]

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/

[Invité]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci

[SpaceFrog]

mousedown != mouseenter ...

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

applique egalement le mousedown sur le mousenter ...