2

JQuery Mobile でサーブレットを呼び出すときに問題が発生しました。iPhone を使用して、リスト エントリを 1 回クリックすると、サーブレット SendMp3Servlet が 6 回呼び出されることに気付きました。Chrome のデスクトップ バージョンを使用すると、サーブレットは 1 回だけ正しく呼び出されます。誰かが問題を見つけるのを手伝ってくれますか?

コードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Canzoni</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="popola_liste.js"></script>
</head> 
<body>
    <script >

    </script>
    <div data-role="page">

        <div data-role="header" >
            <a href="Album.html" data-rel="back">back</a>
            <h1>Project ML</h1>
        </div>

        <div data-role="content">   
            <ul id="listviewSong" data-role="listview" data-inset="true" data-filter="true">
                <script>$.getJSON("GestoreCanzoni?idAlbum="+sessionStorage.getItem("idAlbum"), function(data){
                    var output = '';

                    $.each(data, function(index, value){
                        output += '<li><a href="#" onclick="sessionStorage.setItem(\'idCanzone\',\''+value.id+'\');"> ' + value.nome + '</li>';
                    });

                    $('#listviewSong').append(output).listview('refresh');

                    var event = (navigator.userAgent.match(/iPhone|iPad/i)) ? 'touchstart' : 'click';
                    $('#listviewSong').unbind(event).bind(event,function(e){
                        alert("c");
                        update_player();
                    });

                });</script> 
            </ul>       
        </div><!-- /content -->

        <div data-role="footer" data-position="fixed" data-id="player">
            <audio id="player_audio" controls="controls">
                <source id="src_player" src="sessionStorage.getItem('request_mp3')" type="audio/mpeg" />
            </audio>
        </div>

    </div>

</div><!-- /page -->

</body>
</html>

これは、クリック時に呼び出される js 関数です。

    function update_player(){
        lastIdCanzone=sessionStorage.getItem("idCanzone");
        var id=sessionStorage.getItem('idCanzone');
        sessionStorage.setItem('request_mp3','/Libreria_musicale_server/SendMp3Servlet?idCanzone='+id);
        document.getElementById("src_player").src="/Libreria_musicale_server/SendMp3Servlet?idCanzone="+id;
        document.getElementById("player_audio").load();
        document.getElementById("player_audio").play();
}
4

1 に答える 1

0

Jquery モバイルは少しトリッキーです...まず、JavaScript の onclick イベントではなく、(tap,click....) のような jquery モバイル イベントを使用しないのはなぜですか。

もう 1 つのことは、iphone の jquery mobile ではクリック イベントが 2 回発生することがあるため、タップを使用してみてください。

于 2012-12-25T06:39:30.567 に答える