Javascript sur de l'HTML généré par Javascript = Impossible ?

Bonjour à tous,

Ça m'énerve ! La dernière fois j'étais sur ça :
http://forum.alsacreations.com/topic-5-55130-1-Ajout-de-ligne-automatique.html
Et j'ai finis sur une mauvaise nouvelle comme "c'est pas possible".

Je m'y suis maintenant pris autrement ...
En gros c'est ça : http://davidwalsh.name/dw-content/jquery-record-delete.php (code : http://davidwalsh.name/animated-ajax-jquery)
+ un ajout de ligne que j'ai fais grâce au plugin jquery.form.js
Donc les lignes s'"append" à la suite.

Quand j'ajoute une ligne, elle s'ajoute dans la base de donnée, elle s'ajoute aussi dans ma liste de lignes. SAUF QUE quand je décide de la supprimer ensuite ça marche pas. Il faut que j'actualise la page ... (donc la liste se recrée avec ma nouvelle valeur dedans) pour que je puisse la supprimer. En fait c'est comme si le code javascript "généré" par un script n'était pas pris en compte par un autre script javascript. Javascript sur de l'HTML généré par Javascript = Impossible ?

Je sais même pas si vous donner les codes ça va vous aider ... trop de choses sont impliquées et ça serait peut-être difficile de suivre.

Voilà ma fonction PHP qui affiche mes lignes. Contient le Javascript qui ajoute des lignes.

public function createParcelles($parcelles, $idforet) {
		$str = "
			<div class='list' id='for-".$idforet."'>";
		$i = 0;
		while($i < sizeof($parcelles)) {
		 	$str .= '
		 		<div class="record" id="record-' . $parcelles[$i]->getAttr('id') . '">
					'. $parcelles[$i]->getAttr('id') . '<a class="delete" style="color:#f00;">Delete</a>
					<strong>' . $parcelles[$i]->getAttr('surface') . '</strong>
		     		</div>';
			$i++;
		}
		$str .= '
			</div>';
		
		$str .= '
				<form id="myForm" action="interdit.php?action=ajaxAjouterParcelle" method="post"> 
					Id: <input type="text" name="id" /> 
					Surface: <input type="text" name="surface" />
					<input type="hidden" name="idforet" value="' . $idforet . '" />
					<input type="submit" value="Ajouter la surface" /> 
				</form>';
		$str .= "
		<script>
		$(document).ready(function() {
		  $('a.delete').click(function(e) {
		    e.preventDefault();
		    var parent = $(this).parent();
		    var grandparent = parent.parent();
		    $.ajax({
		      type: 'get',
		      url: 'interdit.php?action=ajaxSupprimerParcelle',
		      data: 'ajax=1&idforet='+ $('.list').attr('id').replace('for-','') + '&delete=' + parent.attr('id').replace('record-',''),
		      beforeSend: function() {
		        parent.animate({'backgroundColor':'#fb6c6c'},300);
		      },
		      success: function() {
		        parent.slideUp(300,function() {
		          parent.remove();
		        });
		      }
		    });
		  });
		});
		</script>";
		return $str;
	}

Et voilà le Javascript qui supprime une ligne (placé dans le HEAD parce que sinon marchait pas).

<script type="text/javascript"> 
	        // wait for the DOM to be loaded 
	        $(document).ready(function() { 
	            $("#myForm").ajaxForm(function showResponse(responseText, statusText, xhr, $form)  { 
	                $(".list").append(responseText);
	            });
	        });
	    </script>

Et le PHP que AJAX appelle pas besoin je pense, il marche.

Quelqu'un a une idée ? J'pensais à un truc bricolé mais j'vous le dis plus tard sinon ça va vous induire en erreur.

Un grand merci à ceux qui m'aideront !
Modifié par 1stance (25 Apr 2011 - 14:44)

J'ai trouvé, j'avais besoin d'utiliser "delegate".
Merci.