1

バックボーンに次のテンプレートがあり、すべてが完全にレンダリングされます。 

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

ただし、次のように記述した場合、タッチスタートはトリガーされません。 

    <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がイベントをバインドできないかのように。何が問題なのですか？

4

1 に答える 1

3

コードにはいくつかの問題があります。

初めに：

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

これにより、 id を持つアンカー要素が選択されbuttonます。ID は一意である必要があるため、これは 1 つの要素のみを返す必要があります。それでも、戻り値をループしようとしています。それはあなたがやろうとしている方法で機能するべきではありません。

2番：

選択した一連の jQuery オブジェクトがある場合は、通常.each()、それらを反復処理するために使用します。しかし、イベント ハンドラーを一連のオブジェクトにバインドしようとしている場合、jQuery はイベントを選択範囲にバインドできるため、ループ内でこれを行う必要さえありません。

三番：

.bind()-ing の動作は異なります。混合しています.bind()- 構文とaddEventListener構文。

したがって、作業中の非 jQuery の例 (jQuery を使用しないことは悪くありません) を jQuery に変換するには、次のようになります。

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

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

function unselect(){
alert('unselect');
}
于 2012-04-03T07:25:48.540 に答える