I'm having trouble using the event.preventDefault(); for an ahref on my DOM

Question

I\'m having trouble using the event.preventDefault(); for an ahref on my DOM.

How do you prevent the url from posting a nofollow delete, as spe

Answer 1

I faced the same issue, but failed to get any good solution after breaking my head for hours. So, based on the suggested answers here, I did something like:

function enableLink() {
  jQuery("#link_id").removeClass("disabled");
  jQuery("#link_id").attr("data-remote", true);
}


function disableLink() {
  jQuery("#link_id").addClass("disabled");
  jQuery("#link_id").removeAttr("data-remote");
}

jQuery(document).ready(function(){
  jQuery(document).on("click", "disabled", function(e){
    e.preventDefault();
  });
});

I accept it's not a good workaround. But, thats what helped me.

Answer 2

Are you using rails? Looks like it.

The reason event.preventDefault() doesn't work is because the magic is done elsewhere. Rails comes with some helpers that creates event handlers for all the "delete" actions generated by Rails. So in your case I think that you need to find out how to override the helpers or just create a custom event handler for that specific delete action.

This is the JQuery code that Rails uses:

https://github.com/rails/jquery-ujs/blob/master/src/rails.js

Based on this (from the link):

linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote]'

Your event handler will be the only one executed if you'd remove data-remote, data-method and data-confirm from the link.

So I suggest that you remove them and then just re-create whatever behavior you want in your own click handler.

Answer 3

It is possible that instead of just event.preventDefault(), you need to do return false also or instead. preventDefault() prevents the default action, but the event still bubbles up, possibly to the next handler, which could be the rails handler that Fredrik pointed out:

 $(rails.linkClickSelector).live('click.rails', function(e) {
    var link = $(this);
    if (!rails.allowAction(link)) return rails.stopEverything(e);

    if (link.data('remote') !== undefined) {
      rails.handleRemote(link);
      return false;
    } else if (link.data('method')) {
      rails.handleMethod(link);
      return false;
    }
  });

Answer 4

It's an old question, but if you are using Rails 5.1+ with the vanilla UJS instead of jQuery one, neither event.preventDefault() nor returning false from the method stops rails-ujs from handling it. You need to explicitly call Rails.stopEverything(event)

$('.trash_can a').click(function(event) {
  Rails.stopEverything(event);
  console.log('Clicked Delete');
});