Привязать событие «touchstart» в jQuery, не работающем с Android PhoneGap и магистралью

Question

У меня есть следующий шаблон в Backbone, все отрисовывается отлично.

    <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>

Touchstart не срабатывает, однако, если я напишу следующее:

    <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> 

это работает. Как будто jQuery не может связать событие. В чем может быть проблема?

Answer 1

В вашем коде есть несколько проблем.

Прежде всего:

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

Выбирает элемент привязки с идентификатором button.Поскольку идентификаторы должны быть уникальными, это должно возвращать только один элемент.Тем не менее, вы пытаетесь перебрать возвращаемое значение.Это не должно работать так, как вы пытаетесь это сделать.

Секунда:

Если у вас есть набор объектов jQuery, который вы выбрали, вы обычно используете .each() для их перебора.,Тем не менее, если вы пытаетесь привязать обработчик событий к набору объектов, вам даже не нужно делать это в цикле, поскольку jQuery может привязать событие к выделению.

Третий:

.bind() -ing работает по-другому, вы смешиваете .bind() - синтаксис с синтаксисом addEventListener.

Итак, чтобы перевести ваш рабочий не-jQuery-пример (неплохо не использоватьjQuery btw) в jQuery это будет выглядеть так:

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

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

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