Cancel Event Click Jquery preventDefault

Question

Hello, I am not able to use addClass when I give a replay on my page using ajax. What happens is that it adds the class to my html element for a moment, but the behavior is as if the page is being loaded, so nothing happens. I’m making a pagination.

$('.waves-effect a').click(function(e) {
  e.preventDefault();
  var url = $(this).data('href');

  $.ajax({
    type: "GET",
    url: url,
    success: function(response) {
      $('#form').html(response)
    },

    complete: function() {
      $(".waves-effect").click(function() {
        $(this).addClass("active");
      });
    }
  });
});

  <li class="waves-effect"><a data-href="webmail.php?page=<?=$i?>"><?=$i?></a></li>

I’m kind of a layman in Jquery, so I appreciate all your help.

Answer 1

Try it like this:

<!-- NO HTML adicione o href="#" -->
<li class="waves-effect"><a href="#" data-href="webmail.php?page=<?=$i?>"><?=$i?></a></li>

<!-- NO JAVASCRIPT -->
$('.waves-effect a').click(function(e) {
  e.preventDefault();
  var element = $(this)
  var url = element.data('href');

  $.ajax({
    type: "GET",
    url: url,
    success: function(response) {
      $('#form').html(response)
    },

    complete: function() {
      $('.waves-effect a').removeClass('active')
      element.addClass("active");
    }
  });
});

Test yourself: https://jsfiddle.net/hbq0h831/1/