Comment puis-je empêcher l'action par défaut de l'événement lorsque qu'un gestionnaire d'événements est attaché à un élément HTML parent?

Question

J'ai beaucoup de liens sur ma page que je veux ajaxifier pour que lorsque je clique sur le lien, cela supprime l'élément, j'ai donc attaché un gestionnaire d'événements à un div parent comme ceci :

   Supprimer
   Supprimer
   Supprimer

Et j'ai utilisé le jQuery suivant

  $('#parent').delegate('a', 'ajax:beforeSend', function(event){
    event.preventDefault();
    var target = $(event.target);
    if (target.is('a')) {
      var itemid = target.attr('data-itemid');
      $.post("/item/"+itemid+'.json', {
        _method: 'delete'
      });
    }
  })
  .live('ajax:success', function(event, data, status, xhr){
    var itemid = data + '';
    console.log(itemid);
    $('item-' + itemid + '-content').fadeOut();
  });

Le problème est que lorsque je clique sur le lien, la requête POST est envoyée et ma page reçoit la réponse, cependant la ligne event.preventDefault() ne semble pas fonctionner, car l'événement de clic passe et envoie une deuxième requête GET pour recharger ma page.

Comment puis-je empêcher ce rechargement de page de se produire ? J'utilise JQuery 1.5.1 et Rails 3.0.7.

Merci

Answer 1

Juste une supposition, je ne l'ai pas essayé mais essayez d'ajouter return false; à la fin de la fonction anonyme beforeSend.

  $('#parent').delegate('a', 'ajax:beforeSend', function(event){
    event.preventDefault();
    var target = $(event.target);
    if (target.is('a')) {
      var itemid = target.attr('data-itemid');
      $.post("/item/"+itemid+'.json', {
        _method: 'delete'
      });
    }
    return false;
  })

Answer 2

Je n'ai aucune expérience avec la fonction delegate(), mais il semble que vous n'envoyez pas l'événement de clic, qui est l'opération par défaut que vous cherchez à éviter.

En consultant la documentation de jQuery, delegate() est un parent de live(): http://api.jquery.com/delegate/

Alors je pourrais essayer quelque chose comme...

$('#parent a').live('click', function(event){
    event.preventDefault();

    var itemid = $(this).attr('data-itemid');

    $.post("/item/"+itemid+'.json', {
      _method: 'delete'
    });
  })
...

Answer 3

Apparemment, ce n'était pas la façon "Rails" de supprimer un élément via un lien AJAX. Au lieu de gérer la configuration ajax manuellement, vous pouvez utiliser une construction similaire à l'horreur suivante

link_to 'Supprimer l'élément', @item, :'data-itemid' => item.id, :class => 'lien-supprimer-element', :remote => true, :'data-method' => :delete, :'data-type' => :json

Ensuite, pour supprimer l'élément de la page et gérer la réponse json du contrôleur :

  $('#parent').delegate('a', 'ajax:success', function(event, data, status, xhr){
    var itemid = data + '';
    $('#item-' + itemid + '-content').fadeOut();
  });

Cela atteint l'objectif final que je me suis fixé. Cela dit, cela ne répond pas vraiment à ma question initiale, donc j'apprécierais tout autre commentaire.

Apparemment, j'ai également vu qu'il y a des problèmes de chaînage et de '.live()' sur JQuery, qui n'existent pas avec '.delegate()'

http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html

Je ne sais pas à quel point cela est toujours précis