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 specified by the HTML using JQuery?

<td class="trash_can">
<a rel="nofollow" data-remote="true" data-method="delete" data-confirm="Are you sure you want to delete Greek Theater at U.C. Berkeley?" href="/promotions/2/places/46">
<img id="trash_can" src="http://test.dev/images/trash.png?1305741883" alt="Trash">

The following code should subvert the HTML but the HTML posts a delete action, prior to giving a "are you sure" warning. nothing is not working:

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

Answer 1

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 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

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.