2

我在使用 JQuery Mobile 调用 servlet 时遇到问题。使用 iPhone，我注意到 servlet SendMp3Servlet 在列表条目上单击一次被调用 6 次。使用 Chrome 的桌面版本，servlet 只被正确调用一次。有人可以帮我找到问题吗？

这是代码：

<!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 mobile 有点棘手...首先，您为什么不使用 jquery mobile 事件，例如：(tap,click ....) 而不是 javascript onclick 事件。

另一件事是iphone上的jquery mobile有时会触发两次点击事件，因此请尝试使用tap。

于 2012-12-25T06:39:30.567 回答