Sélection d'un lien a chaud sur un post fait en ajax

Par daemon24, il y a 11 ans


Bon,je suis entrain de travailler sur le systeme de commentaire dans mon site web et j'ai choisit de faire tout le systeme en ajax.Et pour ce systeme,j'ai choisit $.get .Le probleme auxquel je suis confronté c'est que je n'arrive pas a faire la selection du lien supprimer en jquery sur le commentaire poster en ajax sans recharger la page(ca ne marche pas).Si quelqu'un peut m'aider ca pourraît être sympa.Merci

PHP

<?php $url = Router::url(array('controller'=>'myctrl', 'action'=>'add', 'admin'=> false )); $delete = Router::url(array('controller'=>'myctrl','action'=>'delete', 'admin'=> false)); ?>

JAVASCRIPT

$(function(){ $('#post-form').click(function(e){ e.preventDefault(); $name = "<?php echo $this->Session->read('Auth.User.username') ?>"; $mail = "<?php echo $this->Session->read('Auth.User.email') ?>"; $content = $('#CommentContent').val(); $parent_id=$('#parent_id').val(); $id = $('#CommentPostId').val(); $post = $('.postss'); $.get("<?php echo $url ?>",{username:$name,post_id:$id,email:$mail ,content:$content,parent_id:$parent_id},function(data){ $html ='<div class="comment"style="margin:10px 0;"> <div class="media well">\ <a class="pull-left" href="#">\ <img src="http://1.gravatar.com/avatar/ <?= md5('+data.Comment.email+'); ?>?s=100" width="70%" class="img-circle"></a><a href="#" class="pull-right del" data-id="<?php echo $v['id'] ?>" >Supprimer</a> </div></div></div>' $post.after($html); },'json'); return false; }); $('.del').click(function(e){ e.preventDefault(); console.log($(this).parent().parent()); if(confirm('Voulez vous vraiment supprimer cette image?')){ $.get("<?php echo $delete ?>/"+$(this).data('id')+"",function(data){ },'json'); $(this).parent().parent().slideUp(); } }); });

2 réponses

antho07, il y a 11 ans

Bonjour,

encore une fois (ce problème étant récurrent) :

$('.del').click

A cet endroit jquery parcours le dom à la recherche de ces élements et ajoute des listeners sur l'évènement clicks aux élements trouvés.
Si tu rajoutes à posteriori des élements dans le dom, jquery ne relance pas le parcours du dom et aucun listener ne se trouve alors ajoutés sur tes éléments.

La solution :
Binder l'évenement sur un conteneur parent fixe

Pour ce faire:

$(document).on('click','.del',function(event){ //Ta fonction })

On peut remplacer document par n'importe quel élément parents à tes divs de class del présent avant l'appel ajax.

Cordialement

Antho

daemon24, il y a 11 ans

Merciiiiiiiiiiiiiiiii ca marche.Maintenant j'ai compris