Question

Ok, in my code I have for example, this:

$('.follow').click(function(){
        var myself = $(this);
        var data = {
            id: this.getAttribute('data-id')
        }
        $.post('/users/setFriend', data, function(msg){
            myself.text(msg);
            myself.attr('data-status-friends', (myself.attr('data-status-friends').toLowerCase() == 'follow') ? 'following' : 'follow');
        });
    })

However, i put a class of ‘auth’ on certain elements that if the user is logged out, run this bit of JS:

$('.auth').click(function(e){
    e.preventDefault();
    alert('not logged in');
});

This works for the majority of elements, but with the above POST, it seems to still action the POST. How can I definitively cancel the events fired by other bits of code if .auth is clicked?

Answer 1

I don’t think we should talk about propagation or defaultAction preventing here. The point is that you create two different series of event handlers: one attached to the .follow elements, another – to the .auth elements. Of course, if an element has two classes, clicking it will trigger both handlers automatically – and they both will be attached to this element (hence no propagation).

The most simple solution here, I think, is to remove click handler from an element when you assign .auth class to it.

Or, alternatively, you can check $(this).hasClass('auth') condition within the .follow handler function – and return false immediately if that’s the case.