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;
    }
  });