jQTouch 转到下一页时执行 javascript 代码

Question

我一直在开发一个需要我动态更改内容的 iPhone 应用程序。我有以下代码：

       <div id="home">
       <div class="toolbar">
            <a class="blueButton" href="javascript: void(0);" onClick="$('#logout').show();">Logout</a>
            <h1>AllaccessMD</h1>
        </div>
        <h1>Home</h1>
        <ul class="edgetoedge" id="ulHome"></ul>
    </div>

当调用此页面时，我调用 javascript 函数：

function setupHome(){
if(localStorage.role == "Specialist"){
    var homeUL = '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#ePresentations">My E-Presentation</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">My Newsletter</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">My Events</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">Search</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#date">Profile</a></li>';
    $('#ulHome').html(homeUL);
} else {
    var homeUL = '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
            + '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#date">Search</a></li>'
            + '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#date">Profile</a></li>';
    $('#ulHome').html(homeUL);
}

$('#ulHome li a').click(function(){
    alert('I dont see this alert on a iPhone!');
    if(this.href.search("#ePresentations") != 0) {
        var idObject = getID(this.id);
        setupEPresentation(idObject.id);
    }
});

}

除了 $('#ulHome li a').click() 不起作用之外，这一切都工作正常。它在 Firefox 和 Chrome 上运行良好，但在 iPhone 上则不行。

我哪里做错了？或者有更好的方法来实现这个吗？

谢谢！

Answer 1

使用点击而不是单击，自动更改页面功能也会覆盖您的链接，因为它们有一个 href 位置。另外，我不会将代码中的 javascript 与 javascript 中的事件混合在一起，所以

   <div id="home">
     <div class="toolbar">
        <a id="logoutButton" class="blueButton" href="#">Logout</a>
        <h1>AllaccessMD</h1>
     </div>
   <h1>Home</h1>
   <ul class="edgetoedge" id="ulHome"></ul>
   </div>

：

function setupHome(){
if(localStorage.role == "Specialist"){
    var homeUL = '<li class="arrow"><a class="Presentation" id="s,' + localStorage.userID + '" href="#">My E-Presentation</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" data="#">My Newsletter</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#">My Events</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#">Medical Partners</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#">Search</a></li>'
            + '<li class="arrow"><a id="s,' + localStorage.userID + '" href="#">Profile</a></li>';
    $('#ulHome').html(homeUL);
} else {
    var homeUL = '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#">Medical Partners</a></li>'
            + '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#">Search</a></li>'
            + '<li class="arrow"><a id="m,' + localStorage.userID + '" href="#">Profile</a></li>';
    $('#ulHome').html(homeUL);
}

$('#ulHome li a').tap(function(){
    alert('I dont see this alert on a iPhone!');
    if(this.hasClass("Presentations") ) {
        var idObject = getID(this.id);
        setupEPresentation(idObject.id);
    }
});

$('#logoutButton').tap(function() { 
   $('#logout').show();
});