Evénement qui ne marche plus après modification du DOM

**Jean Fi** · 12/12/2015, 14h52

Bonjour à tous

Je reste bloqué sur un evenement $("div.dateActiv").on("click","a.suppr",function(event) {}) qui ne marche plus si le DOM est modifié par $( "div.dateActiv" ).on("submit","form.ajax",function( event ) {}).
l'element "a.suppr" est enfant d' une table modifié par une requete ajax, elle même enfant de "div.dateActiv" qui elle existe déjà, et même en rattachant l'evenement a "body" ou "document" ça ne change rien.
Alors je suis plutot debutant en Jquery (et pas un grand fan de JS), et galere pas mal pour certaines choses.. (voir code ci dessous

)
la structure html :

Code html :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<body>
<div id="conteneur">
<h1></h1>
	<div class="dateActiv">
		<p>...</p>
		<h2></h2>
			<div id="table15146">
			<!--    -->
				<table border="0" cellspacing="4" class="listeInscrits">
				<tr>
					<th></th> ...
				</tr>
				<tr>
					<td>frergfhj</td>
					<td>...</td>
					<td>...</td>
					<td>...</td>
					<td>3</td>
					<td>...</td>
					<td>...</td>
					<td>...</td>
					<td><a href="inscrit_suppr-ax.php" class="suppr" rel="6439"><img src="..." ... /></a></td>
				</tr>
				<tr>
					<td>bla bla</td>
					<td>...</td>
					<td>...</td>
					<td>...</td>
					<td>2</td>
					<td>...</td>
					<td>...</td>
					<td>...</td>
					<td><a href="inscrit_suppr-ax.php" class="suppr" rel="4758"><img src="..." ... /></a></td>
				</tr>
			</table>
			<p class="dessous"><span class="nbInscrit">5</span> .... </p>
		</div>
		<p class="dessous"><a href="..." class="ajout" rel="15146">Ajouter</a> (<span id="nbPlaces15146">9</span> ...)</p>
		<div id="ajout15146" style="display:none;">
			<form action="inscrit_ajout-ax.php" class="ajax" rel="15146">
				<input type="hidden" name="Idjour" value="15146" />
			<fieldset>
				<legend><b>...</b></legend>
	  			<p>
		  			<label for="contact">...</label>
		  			<input type="text" name="contact" maxlength="64" value="" />
		  			<label for="mail">...</label>
		  			<input type="text" name="mail" maxlength="192" value="" />
	  			</p>
	  			<p>
	  				<label for="telephone">...</label>
	  				<input type="text" name="telephone" maxlength="24" value="" />
	  				<label for="residence">...</label>
	  				<input type="text" name="residence" maxlength="192" value="" />
	  			</p>
	    			<p>
					<label for="nb">...</label>
					<input type="text" class="num" name="nb" maxlength="2" value="" />
					<label for="enfant">...</label>
					<input type="text" class="num" name="enfant" maxlength="2" value="" />
					<label for="gratuit">...</label>
					<input type="text" class="num" name="gratuit" maxlength="2" value="" />
				</p>
				<p>
					<input type="submit" value="Valider" name="send15146" class="button" /><br />
					<span class="error"></span>
				</p>
			</fieldset>
			</form>
		</div>
		<p class="dessous">...</p>
	</div>
	<div class="dateActiv">
		<p>...</p>
		<h2></h2>
			<div id="table12128">
				<table>
				etc...
				</table>
			</div>
	</div>
	etc...
</div>
<script src="../js/jquery-2.1.4.min.js" type="text/javascript"></script>
... $Jquery...
</body>

et le code JQuery

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<script type="text/javascript">
$(document).ready(function() {
var debrid;
$("div.dateActiv").on("click","a.suppr",function(event) {
event.preventDefault(); 
var $resa = $(this).attr("rel");
var $laligne = $(this).closest("tr");
var nomResa = $laligne.children("td").first().text(),
nbResa = $laligne.children("td:eq(4)").text(),
nbTotalResa = $laligne.parents().find(".nbInscrit").first().text(),
url = $(this).attr("href");
//console.debug(nbTotalResa);
debrid = confirm("ATTENTION la suppression ...?");
	if(debrid==true)	{
	var lePost = $.post( url, { resa: $resa } );
	lePost.done(function( data ) {
	var reponse = $( data ).closest( "p" ).attr("class");
	console.log(reponse);
		if(reponse=="ok")	{
		$laligne.slideUp( "slow" );
		var reste = Number(nbTotalResa) - Number(nbResa);
		$laligne.parents().find(".nbInscrit").first().text(reste);
		console.log(reste);
		}
	});	
	}	
});
 
$("a.ajout").on("click",function(event) {
event.preventDefault(); 
var $id = $(this).attr("rel");
var $ladiv = $("#conteneur").find("#ajout"+$id);
	if ( $ladiv.is( ":hidden" ) ) {
	$ladiv.slideDown( "slow" );
	} else {
	$ladiv.hide();
	}
});
 
$( "input[type=text]" ).focus(function() {
if( $(this).hasClass("inputWarning") )	{
$(this).removeClass("inputWarning");
}
});
 
$( "div.dateActiv" ).on("submit","form.ajax",function( event ) {
	event.preventDefault();
	valid = true;
	var $form = $( this ),
	Idjour = $form.attr("rel"),
	tableau = $form.serializeArray(),
	url = $form.attr( "action" );	
	var nbPlaces = $("#nbPlaces"+Idjour).text();
	var adulte = $form.find("input[name=nb]").val();
	var enf = $form.find("input[name=enfant]").val();
	var gratis = $form.find("input[name=gratuit]").val();
	var tot = Number(adulte)+Number(enf)+Number(gratis);
	//console.log(tot);
	//var debrid;
	if($form.find("input[name=contact]").val()=="")	{
	$form.find("input[name=contact]").addClass("inputWarning");
	$form.find(".error").empty().fadeIn().text("bla bla"); 
	valid = false;
	}
	if(tot==0)	{
	$form.find(".num").addClass("inputWarning");
		if(valid==false)	{
		$form.find(".error").append(document.createTextNode(" & re bla bla"));
		}
		else	{
		$form.find(".error").empty().fadeIn().text("bla bla");
		}	
	valid = false;
	}
	else if(tot > nbPlaces) {
		if(nbPlaces<=0)	{
		debrid = confirm("ATTENTION \nle ... ?"); 	
		}	else	{
		debrid = confirm("ATTENTION \nVous ... ?");
		}
		if(debrid == false)	{
		$form.find(".num").val("");
		valid = false;
		}	else {
		valid = true;	}
	}	
 
	//console.log(nbPlaces);
	if(valid == true)	{
	$form.find(".error").fadeOut().empty();
		if( $("input[type=text]").hasClass("inputWarning") )	{
		$("input[type=text]").removeClass("inputWarning");
		}
	var posting = $.post( url, tableau );
	posting.done(function( data ) {
		var result = $( data ).closest( "div" ).html();
		var placeDispo = $( data ).closest("#placeDispo").text();
	//console.log('dispo:'+ placeDispo)
		$("#table"+Idjour ).fadeOut('1000').empty().append( result ).fadeIn('1000');
		$("#nbPlaces"+Idjour).text( placeDispo);
		$form.find("input[type=text]").val("");
		$("#conteneur").find("#ajout"+Idjour).slideUp( "slow" );
	});
	}
	});
});
</script>

Php genere une page avec une ou plusieurs tables de données, $("a.ajout").on("click",function(event) rend visible un formulaire, $( "div.dateActiv" ).on("submit","form.ajax",function( event ) verifie (...partiellement) le formulaire et l'envoie, puis PHP renvoie des données qui remplacent le contenu de "div#tableXXXX".
$("div.dateActiv").on("click","a.suppr",function(event) supprime une ligne de la table, c'est OK si la table originelle n'est pas modifiée, mais pas bon si la table est modifiée...

Est ce quelqu'un peut pointer du doigt ce que j'ai mal fait ... ou mal lu ...

merci d'avance

**mathieu** · 13/12/2015, 23h20

est ce qu'un élément "a.suppr" existe bien dans le code HTML retourné par AJAX ?

**Jean Fi** · 14/12/2015, 13h02

Bonjour,

Oui c'est ça, effectivement, je suis trop bete, j'avais oublié d'apporter les modifications à la cellule qui contient le lien de suppression (ni la classe "suppr", ni le bon lien, ni l attribut "rel"... ça pouvait pas marcher

)
Merci pour ton aide

Evénement qui ne marche plus après modification du DOM

jQuery

Vue hybride

Discussions similaires

Partager

Partager