jQTouch 动态网页应用？

Question

我正在开发一个动态变化的网络应用程序。我正在使用 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= 或者你的引号没有被转义可能会把它扔掉。但我看不出有什么明显的地方你做错了。

你有可以发给我的链接，以便我调试它吗？