Discussion :

[schwarzy2]

Bonjour à tous,

j'ai le souci suivant, j'ai lié une fonction à chaque clic sur un élément de classe suppr. J'ai mis cette fonction dans mon document.ready(), tout va bien, elle fonctionne impeccable.
Mais il m'arrive d'injecter aussi des éléments .supppr via un append (par ajax). Et là ces éléments ne sont plus pris en compte par la fonction document.ready().

Donc ma question est la suivante: comment lier cette fonction à des éléments ajoutés par append?

Voici mon code:

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
20
21
22
23
$(document).ready(function() {
$('#add_line').click(function() {
      //calcul du numero de la ligne
      var num_ligne=$('.subitem').children('fieldset').length;
      num_ligne++;
      var url=$('#url').val();
      $.ajax({
          url: url+"/ajax/id/"+num_ligne,
          context: document.body,
          success: function(data){
             $('.subitem').append(data); /* mon append*/
          }
        });
 
 
	$('.suppr').each(function(key,item){
 
		$(this).click(function(){
			alert('yep');
			//$(this).parent().remove();
		});
	});
});

Merci d'avance pour votre aide!

[SpaceFrog]

Un classique maintes fois traité ...

Logique puisque le ready est lancé lorsque les elements sont instanciés au démarrage et applique les evenements au objets présents sur la page.
Les elements ajoutés ensuite ne passent pas à la moulinette du ready.

Les solution ?

Repasser un coup d'attribution d'evènements sur le callback d'ajax (une fois que le elements ajoutés dynamiquement sont chargés... (un peux fastidieux )

Utiliser live() , on(), ou delegate() ... qui sont prévus a cet effet.

[schwarzy2]

Merci SpaceFrog pour ta réponse, mais malheureusement ça ne marche pas. Je travaille avec jQuery 1.6, j'ai donc mis ces lignes:

Code :

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

1
2
3
4
5
6
7
$(document).delegate(".suppr", "each", function(key,item){ 
	$(this).click(function(){
		alert('yep');
		//$(this).parent().remove();
	});
 
});

Mais sans succès..j'ai aussi essayé on et live (au cas où), sans plus de résultat.
Serait-ce parce qu'il s'agit d'une fonction each?

[SpaceFrog]

pourquoi un each ?

http://api.jquery.com/delegate/