Discussion :

[joums]

Bonjour,

je souhaite par JQUERY créer un élément (une div) en cliquant sur un bouton
et lui affecter un nouvelle ID.

Voici mon début de code mais je bloque

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 <div id="blok">  
        <div id="sousblok">
        </div>
    </div>
<div id="bouton">
        <button onclick="test();">cliquez</button>
    </div>
 
function test (){
  $('<div id = 'blok'<div/>)
    .appendTo('body');
}

Merci de votre aide

[omar24]

teste :

Code :

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

1
2
var ht = "<div id='blok'> <div id='sousblok'></div></div>";
$("body").append(ht);

[joums]

teste :
var ht = "<div id='blok'> <div id='sousblok'></div></div>";
$("body").append(ht);

merci pour votre réponse
cela crée bien les 2 divs mais comment incrémenter leur ID
par exemple sousblok1 puis sousblok2 etc.... à chaque création d'une div

[omar24]

Teste ce code:

Code :

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

1
2
3
4
5
6
 var ind = 0;
function test (){
var ht = "<div id='blok"+ind+"'> <div id='sousblok"+ind+"'></div></div>";
$("body").append(ht);
ind+=1;
}

[joums]

Teste ce code:

Code :

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

1
2
3
4
5
6
 var ind = 0;
function test (){
var ht = "<div id='blok"+ind+"'> <div id='sousblok"+ind+"'></div></div>";
$("body").append(ht);
ind+=1;
}

merci

voici le code que j'ai fait

Code :

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

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
					var currentValue = 0;
					$("#block").click(function () {
						currentValue++;
						var monContenu = '<div class="element2" id="boite'+ currentValue +'">'+ currentValue +'</div>';
						$("#reception").append(monContenu);
						//alert(currentValue);
		                                                               });
											});

[omar24]

Alors ça fonctionne?

[danielhagnoul]

Bonsoir

FAQ jQuery : Comment puis-je créer un nouvel élément du DOM ?

[joums]

Bonjour,

Merci pour vos réponses, j'ai adapté le code et cela marche

Code :

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

1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
//carre
var currentValueJ1 = 0;
$("#carreNoir").click(function () {
currentValueJ1++;
var monContenu = '<div class="element1" id="boite'+ currentValueJ1 +'">'+ currentValueJ1 +'</div>';
$("#reception").append(monContenu);
														});

Je souhaite à présent pouvoir déplacer l'élément créé. Je pensais utiliser l'évênement "Live" mais cela ne marche pas (en utilisant l'ID crée ou bien sa classe)
Voici le code que j'ai commencer

Code :

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

1
2
3
4
 
$("#boite1").live("mousedown", function(){ //boite1 étant l'ID du nouvel élement.
$(this).draggable({ containment: "#reception", scroll: false });
});

Merci pour vos suggestions

[omar24]

tu travailles avec jQuery UI?

[joums]

tu travailles avec jQuery UI?

Je suis débutant .... j'ai lu pas mal de tuto, et je m'inspire des API jquery

J'ai vu que live() était une solution dans mon cas (à la place de Bind)

[omar24]

alors essaye de télécharger jquery ui(fais une recherche de jquery ui dans google vous trouverez le site officiel facilement), aprés tu peux rendretes éléments "draggable" comme suit:

Code :

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

$("#draggable").draggable();

consulte ce lien

[joums]

alors essaye de télécharger jquery ui(fais une recherche de jquery ui dans google vous trouverez le site officiel facilement), aprés tu peux rendretes éléments "draggable" comme suit:

Code :

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

$("#draggable").draggable();

consulte ce lien

Ce que j'ai fait, l'évênenement draggable marche.

Mais cela marche dans un fichier où il y a déjà 2 "carrés" déjà chargé.

Mais ca ne marche plus quand je créé les carrés

[omar24]

j'ai une proposition mais je ne suis pas sur, essaye de faire sortir le code de la fonction ready? car le code appelé à l’intérieur de cette méthode est appelé après le chargement de la page c'est à dire après un rafraîchissement.

[joums]

j'ai une proposition mais je ne suis pas sur, essaye de faire sortir le code de la fonction ready? car le code appelé à l’intérieur de cette méthode est appelé après le chargement de la page c'est à dire après un rafraîchissement.

j'ai réussi, en laissant dans la function ready.
Mais lorsque je l'adapte au code final, cela ne marche plus,
je vais tout regarder pour voir si je me suis pas trompé quelque part.

Je te tiens au courant avec le code finalisé
encore merci