Как я могу предотвратить действие события по умолчанию, когда обработчик событий присоединен к родительскому элементу HTML?

Question

У меня есть много ссылок на моей странице, которые я хочу изменить, чтобы, когда я щелкаю ссылку, он удалял элемент, поэтому я прикрепил обработчик события к родительскому элементу div следующим образом:

<div id="parent">
   <a href='#' data-itemid='1'>Delete Me</a>
   <a href='#' data-itemid='2'>Delete Me</a>
   <a href='#' data-itemid='3'>Delete Me</a>
</div>

И я использовал следующий JQuery

  $('#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();
  });

Проблема в том, что когда я нажимаю на ссылку, POST отправляется, и моя страница получает ответ, однако строка event.preventDefault () не работает, потому что событие click проходит и отправляет второй GET просьба перезагрузить мою страницу.

Как я могу предотвратить перезагрузку этой страницы? Я использую JQuery 1.5.1 и Rails 3.0.7.

Спасибо

Answer 1

У меня нет опыта работы с функцией делегата (), но не похоже, что вы отправляете событие click, что является операцией по умолчанию, которую вы хотите избежать.

Смотря на документацию jQuery, делегат () является родственником live (): http://api.jquery.com/delegate/

Так что я мог бы попробовать что-то вроде ...

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

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

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

Answer 2

По-видимому, это был не "Rails" способ удалить элемент по AJAX-ссылке.Вместо того, чтобы обрабатывать настройку ajax вручную, вы можете использовать конструкцию, аналогичную следующей:

link_to 'Delete Item', @item, :'data-itemid' => item.id, :class => 'delete-item-link', :remote => true, :'data-method' => :delete, :'data-type' => :json

Затем удалить элемент со страницы и обработать ответ json из контроллера:

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

Это достигает конечной цели, ради которой я поставил.Тем не менее, это на самом деле не отвечает на мой первоначальный вопрос, поэтому я буду признателен за дальнейшие комментарии.

Очевидно, я также видел, что есть проблемы с цепочками и '.live ()' в JQuery,которые не существуют с '.delegate ()'

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

Не знаю, насколько точно это все еще

Answer 3

Просто предположение, не пробовал, но попробуйте добавить return false; в конец анонимной функции 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;
  })