jQuery格式不应用于ajax数据，尽管刷新

jQuery formatting not applying to ajax data despite referesh

本文关键字：刷新 数据 ajax 格式 应用于 jQuery      更新时间：2023-09-26

我正在通过GET响应消息从服务器(php文件)加载一个可折叠的列表视图。但是，尽管刷新了jQuery元素

，但jQuery格式并没有应用到添加的HTML中。

我的主页在这里:http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.html

HTML代码(仅限相关代码)

<script>
lastRecord=0;
    function loadEvents(){
        $('#sample').html( 'hello' );
        $.get(
        "eventquery.php?lastRecord="+lastRecord,
        function( data ) {
            $('#loadCollapsible').append( data )
            .listview( 'refresh' );
            }); 
    }
</script>
</head>
<body style="background-color : #e9e9e9;" onload="loadEvents()">
<div data-iconpos="none" data-role="collapsibleset" data-theme="a" data-content-theme="a">
<div data-role="collapsible" data-collapsed="false">
    <h2><img src="today_calendar.png" style="height: 60px; vertical-align:middle;"> Today's Events </h2>
    <div id="loadCollapsible">
    <!-- Load from php -->
    </div>
</div>

PHP代码

    while ($row = mysql_fetch_array($result)){
        print '<div data-role="collapsible" data-collapsed="false">';
        print '<h5>'.$row['Title'].'<h5>';
        print ' <ul data-role="listview">';
        print '<li><a href="#">';
        print '<table><tr><td>Date</td>';
        print '<td style="padding: 10px;">'.$row['Date'].'</td>';
        print '</tr><tr>';
        print '<td> Time </td>';
        print '<td style="padding: 10px;">'.$row['Time_Duration'].'</td>';
        print '</tr><tr>';
        print '<td> Venue </td>';
        print '<td style="padding: 10px;">'.$row['Venue'].'</td>';
        print '</tr></table></a></li>';
        print '<li style="background-color: #CADECC;">';
        print '<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>';
        print '</li></ul>'; 
        print '</div>';
    }

jQuery Mobile listview必须在调用刷新方法之前先初始化。

因为你是用ajax加载列表，所以它不会自动初始化。试试这个:

function loadEvents(){
        $('#sample').html( 'hello' );
        $.get(
        "eventquery.php?lastRecord="+lastRecord,
        function( data ) {
            $('#loadCollapsible').append( data );
            $('#loadCollapsible ul').listview().listview( 'refresh' );
            }); 
    }

感谢@user1672694。这段代码通过改变HTML中的loadEvents()函数来工作:

function loadEvents(){
    $('#sample').html( 'hello' );
    $.get(
    "eventquery.php?lastRecord="+lastRecord,
    function( data ) {
        $('#loadCollapsible').append( data )
        .trigger( 'create' )    
        .listview( 'refresh' );
        });         
}
相关文章：