Question

this is part of my code:

$('.toggle_box').each(function (){ 
    var timeout, longtouch;  
    $(this).bind('mousedown', function() {
        timeout = setTimeout(function() {
            longtouch = true;
        }, 1000);

    $(this).bind('mouseup', function(){
        if (!longtouch) {
            clearTimeout(timeout)
            var state = $(this).find('.switch').attr('data-state');
            if(state == "off"){
                $(this).find('.switch').attr('data-state','on');
            }
            else{
                $(this).find('.switch').attr('data-state','off');
            }
            var choice = $(this).parent();
            ckbmovestate(choice)
        }
        else{
            alert("3")
        };
    });
})
});

when I click an element (mousedown and up) it works fine, but the 2e time I have to double click the element for it to fire. It looks like the second click resets the bind so that the 3e can use it again. just weird.

Here is a demo: Not valid anymore…
It is the orange checkbox 🙂 (please check in safari/chrome)

thank you for your help 🙂

Answer 1

Checkout the code posted here … http://jsfiddle.net/qv4Ve/2/

You were binding the mouseup event inside the mousedown event handler. You ought to have to bound them independently of each other.

$(this).bind('mousedown', function() {
    timeout = setTimeout(function() {longtouch = true;}, 1000);
    console.log("inside mouse down");
});

$(this).bind('mouseup', function(){
    console.log("inside mouse up");
    if (longtouch === false) {
        clearTimeout(timeout)
        var state = $(this).find('.switch').attr('data-state');
        if(state == "off"){
            $(this).find('.switch').attr('data-state','on');
        }
        else {
            $(this).find('.switch').attr('data-state','off')
        ;}

        var choice = $(this).parent();
        ckbmovestate(choice)
    }
    else {
        alert("is a long touch")
    };
});

The code in the fiddle posted above works the way you want it to …