jQTouch动态网页应用？

Question

我正在开发一个动态变化的web应用程序。我使用javascript和jQuery来填充<li>和<a>的DIV。例如，我从一个用javascript动态构建的菜单开始。从那个菜单开始，根据所选的项目，调用另一个javascript函数来动态填充相应的DIV。当我继续动态生成子菜单而JQTouch没有切换到下一页时，问题就来了。

在以下代码中，alert('what')显示在iPhone上，但从不切换到ePresentationDetails DIV。我尝试过使用jQT.goTo()来强制它；但是这通常会导致更多的问题，并且不能解决问题。

基本html代码：

     <div id="home">
        <div class="toolbar">
            <a class="blueButton" href="javascript: void(0);" onClick="$('#logout').show();">Logout</a>
            <h1>AllaccessMD</h1>
        </div>
        <div id="logout" style="display:none;">
            <div id="confirmBox">
                Are you sure?
                <a class="logoutButton" href="javascript: void(0);" onClick="logOut();">Logout</a>
                <a class="cancelButton" href="javascript: void(0);" onClick="$('#logout').hide();">Cancel</a>
            </div>
        </div>
        <h1>Home</h1>
        <ul class="edgetoedge" id="ulHome"></ul>
    </div>
    <div id="ePresentations">
        <div class="toolbar">
            <a class="button back" href="#">Back</a>
            <h1>AllaccessMD</h1>
        </div>
        <div id="ePresentationsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
        </div>
    </div>
    <div id="ePresentationDetails">
        <div class="toolbar">
            <a class="button back" href="#">Back</a>
            <h1>AllaccessMD</h1>
        </div>
        <div id="ePresentationDetailsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
        </div>
    </div>

Javascript文件：

function setupHome(){
if(localStorage.role == "Specialist"){
    var homeUL = '<li class="arrow"><a id="aEP" rel="s,' + localStorage.userID + '" href="#ePresentations">My E-Presentation</a></li>'
            + '<li class="arrow"><a id="aN" rel="s,' + localStorage.userID + '" href="#date">My Newsletter</a></li>'
            + '<li class="arrow"><a id="aE" rel="s,' + localStorage.userID + '" href="#date">My Events</a></li>'
            + '<li class="arrow"><a id="aMP" rel="s,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
            + '<li class="arrow"><a id="aS" rel="s,' + localStorage.userID + '" href="#date">Search</a></li>'
            + '<li class="arrow"><a id="aP" rel="s,' + localStorage.userID + '" href="#date">Profile</a></li>';
    $('#ulHome').html(homeUL);
} else {
    var homeUL = '<li class="arrow"><a id="aMP" rel="m,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
            + '<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>'
            + '<li class="arrow"><a id="aP" rel="m,' + localStorage.userID + '" href="#date">Profile</a></li>';
    $('#ulHome').html(homeUL);
}
$('#ePresentations').bind('pageAnimationStart', function (e){setupEPresentations(getID($('#aEP').attr('rel')).id);});
}
function setupEPresentations(sID){
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var epObject = JSON.parse(xmlhttp.responseText);
        var html = '<h1>Dr. ' + epObject.DR.DATA[0][1] + ' E-Presentation\'s</h1>';
        if(epObject.EP.DATA.length == 0){
            html += '<div><p>There are currently no E-Presentation\'s for this doctor.</p></div>';
        } else {
            html += '<ul class="edgetoedge">';
            for(var i in epObject.EP.DATA){
                html += '<li class="arrow"><a id="' + epObject.EP.DATA[i][0] + '" href="#ePresentationDetails">' + epObject.EP.DATA[i][1] + '</a></li>';
            }
            html += '</ul>';
        }
        $('#ePresentationsData').html(html);

        $('#ePresentationsData li a').click(function(e)   {alert('what');setupEPresentationDetails(this.id);});
    }
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getAllEPsID&sID=" + sID,true);
xmlhttp.send();
}
function setupEPresentationDetails(id){
/*xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var epObject = JSON.parse(xmlhttp.responseText);
        var html = '<h1>Dr. ' + epObject.DATA[0][0] + ' E-Presentation</h1>';
        html += '<p>';
        //html += '<br />' + epObject.DATA[0][2].format("mmmm dd, yyyy");
        html += '<br /><strong>Rating:</strong> ' + Math.ceil(epObject.DATA[0][4]) + ' / 5 (' + epObject.DATA[0][5] + ' votes cast)';
        html += '<br /><br /><a rel="external" href="http://www.youtube.com/v/' + epObject.DATA[0][3] + '">Click here to view E-Presentation</a>';
        html += '</p>';
        $('#ePresentationDetailsData').html(html);
    }
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getEP&id=" + id,true);
xmlhttp.send();*/
$('#ePresentationDetailsData').html('I dont get called?');
 }

我做错了什么？也许有更好的方法可以做到这一点？

谢谢！！

Answer 1

您使用的是什么版本的JQT？您是否将整个应用程序包装在<div id="jqt"></div>中？您是否使用Safari开发人员模式查看过它，以便在呈现列表HREF时查看它们的实际内容？

我会在呈现的HREF中查看以下内容：

<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>

确保html是它应该是的。没有被转义的rel=或你的引文可能会把它抛到一边。但我看不出你做错了什么。

你有一个链接，你可以发送给我，让我可以调试它的行动？