Question

一位朋友帮我解释了这段代码。它在没有jQTouch或JQM的HTML中完美运行。放入JQM时，详细信息部分不会显示在下一页上。我究竟做错了什么？

这是我的jQuery移动支出。非常简单，只是试图让细节页面（Pagethree）显示出来。目前它还原为第一页，但网址列表正确。

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "COMBINED.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('MEMBERS').each(function(){
                 /* 
                 * set up list page
                 * gather all variables and format into single variable
                 * for ease of editing
                 */
                var thisID = 'DETAILSPAGE'+$(this).find('ID').text();
                var FIRSTNAME = $(this).find('FIRSTNAME').text()
                var LASTNAME = $(this).find('LASTNAME').text()
                var PARTY = $(this).find('PARTY').text()
                var DISTRICT = $(this).find('DISTRICT').text()
                var TITLE = $(this).find('TITLE').text()
                var THISMEMBER = FIRSTNAME +' '
                        + LASTNAME +'<br />'
                        + TITLE +'-District '+ DISTRICT +', '
                        + PARTY;
                $('<li></li>').html('<a href="#'+thisID+'">'+THISMEMBER+'</a>').appendTo('#LIST');
                /* set up details page */
                var EMAIL = $(this).find('EMAIL').text();
                var OCCUPATION = $(this).find('OCCUPATION').text();
                var EDUCATION = $(this).find('EDUCATION').text();
                var THISMEMBERDETAIL = '<strong>'+FIRSTNAME+' '+LASTNAME+'</strong><br />'
                        + EMAIL+'<br />'
                        + OCCUPATION+'<br />'
                        + EDUCATION;
                $('<a class="memberInfo" name="'+thisID+'"></a>').html(THISMEMBERDETAIL).appendTo('#DETAILS');
            });
        }
    });
    /* toggle function */
    $('a').live('click', function(){
        /* get rid of the pound sign */
        var href = $(this).attr('href');
        var details = href.substring(1);
        /* if any previous member info was showing, hide it */
        $('.memberInfo').hide();
        /* show the current member info */
        $('a[name="'+details+'"]').show();
    });
});

CSS

.memberInfo {
    /* start with all member info hidden */
    display: none;
}

HTML

<div data-role="page" id="page" data-theme="b" >
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">     
        <ul data-role="listview">
            <li><a href="#LISTPAGE">Page Two</a></li>
            <li><a href="#page3">Page Three</a></li>
            <li><a href="#page4">Page Four</a></li>
        </ul>             
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>    
<div data-role="page" id="LISTPAGE">
    <div data-role="header">
        <h1>Page Two</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" id="LIST"></ul>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
   </div>
</div>
<div data-role="page" id="DETAILSPAGE">
    <div data-role="header">
        <h1>Page Three</h1>
    </div>
    <div data-role="content" >
        <ul data-role="listview" id="DETAILS"></ul>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

Answer 1

#DETAILS是你的html中的ul，所以需要将你的锚标记包装在li元素中。

尝试替换

$('<a class="memberInfo" name="'+thisID+'"</a>').html(THISMEMBERDETAIL).appendTo('#DETAILS'); 与

$('<li><a class="memberInfo" name="'+thisID+'"></a></li>').html(THISMEMBERDETAIL).appendTo('#DETAILS');

Answer 2

改变了这个并且它奏效了！ $（＆＃39;＆＃39）。HTML（THISMEMBERDETAIL）.appendTo（＆＃39;＃详情＆＃39）;

感谢Jay Blanchard和他出色的书“应用Jquery”！

Answer 3

您在问题中的行是说：“创建一个锚元素，然后将THISMEMBERDETAIL中的所有HTML放入其中，然后将其添加到#DETAILS”。

$('<a class="memberInfo" name="'+thisID+'"></a>').html(THISMEMBERDETAIL).appendTo('#DETAILS');

你的答案中的一句话是：“创建一个空字符串，然后将其替换为THISMEMBERDETAIL中的HTML，然后将其添加到#DETAILS”。这与您的问题中的代码完全不同，因为它没有向<a>添加#DETAILS。

$('').html(THISMEMBERDETAIL).appendTo('#DETAILS');

因此，如果您真正想要的是您在答案中所说的内容，那么更简洁的方法是：

$('#DETAILS').append( THISMEMBERDETAIL );

jQuery .appendTo（）在<ul>无法正常工作</ul>

3 个答案: