Question

Simple question. I have the following HTML:

<a  rel="nofollow" id="claim-job-link" data-method="post" class="button green claim-job" href=""><span class="button"> <span class="text"> Claim Job </span> </span></a>

And the following Jquery:

 $("#claim-job-link").bind('click', function(event) {
               event.preventDefault();
    });

which is called with no problems. Adding a breakpoint to the preventDefault shows that it is called. However, the browser is still redirected in both Chrome and Firefox. Anyone faced anything similar?

---

Edited to add

It looks like the the event is prevented at first and then jquery enters this code block:

 for ( i = 0, l = elems.length; i < l; i++ ) {
        match = elems[i];

        if ( maxLevel && match.level > maxLevel ) {
            break;
        }

        event.currentTarget = match.elem;
        event.data = match.handleObj.data;
        event.handleObj = match.handleObj;

        ret = match.handleObj.origHandler.apply( match.elem, arguments );

        if ( ret === false || event.isPropagationStopped() ) {
            maxLevel = match.level;

            if ( ret === false ) {
                stop = false;
            }
            if ( event.isImmediatePropagationStopped() ) {
                break;
            }
        }
    }

    return stop;
}

Then when it exits, it runs the does the redirect call.

Thanks

Answer 1

Thanks for your help guys. I figured it out though. In a rails app, when you call either :remote=>true or :method=>:xxx, it adds a tag to the link. This tag is processed by the rails app in such a way that the event.preventDefault call doesn’t work. By removing the :method attribute, the call now works. Go figure. Thanks again for all your help.