Javascript обязательный для 'click' и preventDefault() не работает

Question

Невеста к JavaScript. Когда страница загружается, она связывает функцию removeFav/addFav с событием click тега anchor. Все работает по назначению, но когда пользователь нажимает на ссылку, она берет пользователя в верхней части страницы. Я попробовал preventDefault() в разных местах каждой из функций. Это остановило бы щелчок по умолчанию, но это предотвратило бы выполнение остальной части кода или нарушение функциональности.

ПредотвращенDefault() еще правильный путь? Где следует предотвращатьDefault()? Как я могу остановить страницу от возврата в начало страницы при каждом нажатии ссылки. Любая помощь будет оценена по достоинству.

JavaScript код:

// Add a favorite 
function addFav() { 
    var id = $(this).data('id'); 
    var url = '/listings/' + id + '/favorite'; 
    $.ajax({ 
     url: url, 
     type: 'put', 
     success: function(){ 
     $('this') 
      .addClass('active') 
      .off('click') 
      .on('click', removeFav) 
     ; 
     console.log("success in add function"); 
     }, 
     error: function() { 
     console.log("error in add function"); 
     } 
    }); 
} 

    // Remove a favorite 
    function removeFav() { 
    var id = $(this).data('id'); 
    var url = '/listings/' + id + '/unfavorite'; 
    $.ajax({ 
     url: url, 
     type: "post", 
     dataType: "json", 
     data: {"_method":"delete"}, 
     success: function(){ 
     $('this') 
      .removeClass('active') 
      .off('click') 
      .on('click', addFav) 
     ; 
     console.log("success in remove function") 
     }, 
     error: function() { 
     console.log("error in remove function") 
     } 
    }); 
    } 

    // Attach the add or remove event handler to favorite links 
    function attachFavHandler() { 
    $('a#fav').each(function() { 
    var status = $(this).hasClass('active'); 
    if (status) { 
     $(this).on('click', removeFav); 
    } else { 
     $(this).on('click', addFav); 
    } 
    console.log(status) 
    }); 
    } 

    // Lets get the 'favorites' party started 
    attachFavHandler(); 

Рельсы Код:

  <% if user_signed_in? %> 
      <% if current_user.favorites.where(:listing_id => listing.id).first.nil? %> 
       <%= link_to "", "", :id => "fav", :class => "", :'data-id' => "#{listing.id}" %> 
      <% else %> 
       <%= link_to "", "", :id => "fav", :class => "active", :'data-id' => "#{listing.id}" %> 
      <% end %> 
      <% end %> 

Answer 1

Что вам нужно сделать, это вызвать метод preventDefault() на самом мероприятии. Чтобы получить событие, вам нужно передать событие в свои обработчики, которые уже привязаны к событиям.

Итак, все, что вам нужно сделать, это использовать это событие в ваших обработчиках.

function removeFav(e) { 
    e.preventDefault() 
    ... 
}