Bind 'touchstart' event in jQuery not working with android phonegap and backbone

Question

I have the following template in Backbone, all gets rendered perfectly.

    <a href="#list" data-role="button" id="button" class="all-unselected"></a>
    <a href="#" data-role="button" id="button" class="suggested-unselected"></a>
    <a href="#" data-role="button" id="button" class="friends-unselected"></a>
    <a href="#" data-role="button" id="button" class="private-unselected"></a>
    <a href="#" data-role="button" id="button" class="buzz-unselected"></a>
    <script type="text/javascript">
        var buttons = $("a#button");

        for(var i=0; i<buttons.length; i++){
            $(buttons[i]).bind('touchstart', select, false);
            $(buttons[i]).bind('touchend', unselect, false);
        }

        function select(){
            alert('test');
        }
        function unselect(){
            alert('unselect');
        }
    </script>

The touchstart doesn't get triggered however if I write the following:

    <a href="#" data-role="button" id="button1" class="suggested-unselected"></a>
    <script type="text/javascript">
            document.getElementById('button1').addEventListener('touchstart', select, false);

        function select(){
            alert('test');
        }
        function unselect(){
            alert('unselect');
        }
    </script>

it works. As if jQuery can't bind the event. What might be the problem?

score 3 · Accepted Answer · answered Apr 03 '12 at 07:25

There are a couple of issues in your code.

First of all:

var buttons = $("a#button");

This selects an anchor element with the id button. As ids should be unique, this should only return one element. Yet, you are trying to loop through the returned value. That should not be working the way you are trying to do it.

Second:

If you have a set of jQuery object that you have selected you usually use .each() to iterate over them. Yet, if you are trying to bind an event handler to a set of objects you don't even have to do this in a loop as jQuery is able to bind an event to a selection.

Third:

.bind()-ing works different, you are mixing .bind() - syntax with addEventListener syntax.

So, to translate your working non-jQuery-example (it's not bad not to use jQuery btw) into jQuery this would look like:

$('#button1').bind('touchstart', select);
$('#button1').bind('touchend', unselect);

function select(){
alert('test');
}

function unselect(){
alert('unselect');
}

I had tried your code before. It still doesn't work. It seems to me that jQuery binds to the event in a way that it is expecting an event different from the touchstart that is actually triggered. I made sure to remove my non working code, so that it doesn't prevent the rest from running correctly. — mabounassif, Apr 03 '12 at 07:55
@mabounassif it's working fine for me [and other people](http://stackoverflow.com/questions/7018919/how-to-bind-touchstart-and-click-events-but-not-respond-to-both), but if you're ok with the `addEventListener` why don't you just use that? — m90, Apr 03 '12 at 07:59

Bind 'touchstart' event in jQuery not working with android phonegap and backbone

1 Answers1