Question

So right now, I am using hammer.js to bind some touch controls to an element on the page. By swiping to the right on an element, it will add the class of disabled. If any item has a class of disabled, I want to, essentially, “unbind” the doubletap and the swiperight events ONLY for that element that has the class disabled. Does anyone know if this is possible?

$('.row').hammer({
    prevent_default: false,
    drag_vertical: false
}).bind('doubletap swiperight', function(e) {
    var $this = $(this)
    if (e.type == "doubletap") {
        confirm("Do You Want To Edit Med?")
    }
    else if (e.type == "swiperight") {
        $this.removeClass('yHighlight');
        $this.addClass('gHighlight disabled');
        $this.css('opacity','.5')
    }

});

Answer 1

You can simply check from inside your event handler if the element that triggered the event has that class; if it does, then return without doing anything.

.bind('doubletap swiperight', function(e) {
    var $this = $(this);

    // ADDED CODE
    if ($this.hasClass("disabled")) {
        e.stopPropagation();
        return;
    }
    if (e.type == "doubletap") {
        confirm("Do You Want To Edit Med?")
    }
    else if (e.type == "swiperight") {
        $this.removeClass('yHighlight');
        $this.addClass('gHighlight disabled');
        $this.css('opacity','.5')
    }
});