Discussion :

[ambi86]

Bonjour j'ai un souci avec mon code.

j'ai fait un clone de mon div voila le code du div :

Code html :

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

1
2
3
4
5
6
7
8
9
<div id="blocNote" post_it_id="1">
		<div id="titre"> <input id="input1" type="text" name="titre" value="Entrez votre titre">  </input>
		<a><img id="fermer" src="fermer.png" title="fermer"></img></a> 
		<a><img id="importer" src="importer.png" title="importer une sauvegarde">
		<a><img id="sauvegarder" src="sauvegarder.png" title="sauvegarder" ></img></a> 
		<a><img id="ajouter" src="ajouter.png" title="ouvrir un nouveau bloc note"> </a>	</div> 	<hr/>
 
		<div contenteditable="true" id="note" >Saisissez vos notes</div>
	</div>

et son css :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
#blocNote{padding:0 10px 0 10px;max-height:600px;max-width:600px;display:none;background:#FEFEBA;position:absolute;border:1px solid black;height:100px;width:235px;border-radius:5px;padding:5px 5px;line-height:20px;font-size:13px;margin-left:41.5%;margin-top:10%;min-width:235px;min-height:150px;}
 
#titre{display:inline-block;width:100%}
#titre input {text-align:center;height:30%;min-height:30px;max-height:30px;max-width:400px;width:60%;color:#989E9D;border:1px solid black;border-radius:2px;}
#fermer {float:right;line-height:11.5px;text-decoration:none;width:10px;}
#importer {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
#sauvegarder {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
#ajouter {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
 
#note {position:relative;color:#989E9D;border:1px solid black;border-radius:2px;background: white;width:100%;text-align:center;word-wrap:break-word;height:70%;boder:0 5px 0 5px;line-height:800%;overflow:auto;}
 
#blocNote a{cursor:pointer;}

j'ai fait un copie du div en utilisant la fonction clone() quand je clique sur l'image portant l'id="ajouter" pour simuler un ajout de nouvelle bloc note que j'ai mis dans une nouvelle div(blocS) :

Code :

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

1
2
3
4
5
	//ajouter
	$("#ajouter").on("click",function(){	
	var copie = $('#blocNote').clone();
    copie.removeAttr("blockNote").appendTo('#blocS');		
	});

jusqu'ici tout fonctionne ca me fait bien un copie voila une petite capture d'ecran :


mais le souci c'est qu'il ne fait plus les fonctions javascript que j'ai appliquer au vrai div par exemple quand je clique sur fermer il ne fait rien alors que j'ai appliquer un evenement onclick() sur l'id="fermer" ca le met en display: none

Merci de me repondre

[flavors]

Bonjour.

Est-ce que "blocS" existe déjà quand tu réalises ta copie ou est-ce que tu le créais au moment de la copie?
Parce que j'avais déjà rencontré ce problème et dans mon souvenir c'est que tu créais l'objet après le chargement de la page, le javascript ne lui est donc pas appliqué.
Ca remonte un peu et mon explication n'est probablement pas la bonne mais tu pourrais essayer de mettre ta copie dans un div déjà existant.

[Watilin]

J'ai perdu un œil en regardant ton code CSS.

Pour ton problème principal, tu as deux solutions :

• rattacher tous les gestionnaires d'évènements nécessaires sur le nouveau clone à chaque fois que tu en crées un ;
• surveiller les évènements sur un ancêtre commun à tous les clones (il me semble que #blocS fera l'affaire).

Personnellement j'ai une préférence pour la solution de l'ancêtre commun. Avec jQuery, utilise la méthode .on() avec un sélecteur, par exemple :

Code :

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

1
2
3
$("#blocS").on("click", "#fermer", function () {
  // …
});

Remarques :

• Normalement on n'est pas censé avoir plusieurs fois le même id dans une page. Je te conseille de remplacer tous les id de ta <div> à cloner par des classes, et de remplacer tous les sélecteurs #titre, #fermer, etc. par .titre, .fermer, etc. (respectivement).
• Est-ce que tu es sûr de cette instruction ?
  

  Code :

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

  copie.removeAttr("blockNote")

• D'un point de vue ergonomique, ce n'est pas aux éléments <img> de porter l'aspect interactif ; c'est le rôle des <a>. En ajoutant un attribut href="#" à tes liens, tu les rend fonctionnels et tu permets aux navigateurs de donner des indices visuels à l'utilisateur (par exemple un changement de curseur au survol) que « cet élément est interactif ».
  

  Code html :

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

  <a class="fermer" title="fermer" href="#"><img src="fermer.png" alt="[X]" /></a>

  Cette approche a deux (petits) inconvénients :
  
  1. Ça t'oblige à rajouter une ligne de code dans tes gestionnaires pour annuler le comportement par défaut du lien :
     

     Code :

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

     1
     2
     3
     4
     $("#blocS").on("click", ".fermer", function (event) {
       event.preventDefault();
       // …
     });

  2. Si des aspecs visuels des liens ne te plaisent pas (couleur, soulignement), tu dois les modifier dans le CSS.
  
  Malgré ces deux inconvénients, je trouve que le gain d'interactivité vaut la peine.

[ambi86]

merci ca fonctionnne !!!