Discussion :

[drick35]

Bonjour,

Voici deux addEvent qui fonctionnent bien.
J'injecte un <li> en cliquant sur le bouton et j'arrive à déplacer de haut en bas les <li> mis en html.

Mon problème, je n'arrive pas à déplacer le <li> injecté.
J'ai passé une bonne soirée dessus et ne trouve pas.

Merci pour l'aide.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<input id="addDiv" type="button" value="Add a new div" />
 
<p>Click one of the blocks:</p>
 
<ul id="example1">
 <li>Item #1</li>  
 <li>Item #2</li>  
 <li>Item #3</li>  
 <li>Item #4</li>  
 <li>Item #5</li>  
</ul>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.addEvent('domready', function() {
// Add new li----
$('addDiv').addEvent('click', function(){
   var myFirstElement = new Element('li.new', {html:'<p style"border:5px">another content</p>'},{id: 'myFirstElement'});
    var nouveau = myFirstElement.inject($('example1'), 'bottom');    }               
   );
// end Add new li---------------------------------------------------
   //move item------------------------------------------
    var example1 = $('example1'),
   step = 0;
 
 example1.getElements('li').each(function(li){
   var color = [step, 82, 87].hsbToRgb();
   li.setStyles({
     'background-color': color,
     height: Number.random(20, 50)
   });
   step += 35;
 });

A++

[vermine]

Bonjour et bienvenue,

Le code qui recolore et qui change la taille des <li> n'est pas inclus dans la gestion de l'événement click. Ce code s'exécute au moment du domready et puis c'est tout. Ce qui veut dire que les nouveaux éléments de l'arbre DOM ne seront jamais modifié.

Donc vous devez inclure ce code dans la gestion du clic et ne pas oublier de l'appeler au moment du domready également.

Faites attention à ce que vous désirez au final. Si vous rappelez le each à chaque ajout, toutes les couleurs et les tailles vont changer.

[drick35]

merci c'est vraiment sympa, sa fonctionne