javascript - Jquery Mobile 处理 ajax 请求

Question

目前我正在使用 Jquery mobile 并遇到以下问题:

我试图通过 ajax 在 div 中加载列表，但当我通过 ajax 加载 jquery mobile 格式的列表时，它不是由 jquery mobile 模板化的(未应用类)我该如何解决此问题？

列表页面(排除标题等以保持简短)

<?php 
    $technicalListUrl =  Helper::url("/technical_work_orders/overview/"); 
    $visualListUrl =  Helper::url("/visual_work_orders/overview/");

?>

<script type="text/javascript">

$(document).ready(function() {            
    $("#visualIcon").click(function() {
        //load visual work orders
        $('#workOrderList').load('<?php echo $visualListUrl?>');
    });

    $("#technicalIcon").click(function() {
        //load technical work orders
        $('#workOrderList').load('<?php echo $technicalListUrl ?>');

    });
});

</script>




<div data-role="navbar" class="glyphish" data-iconpos="top"  >
<ul>
        <li ><a href="#" id="visualIcon" data-icon="custom">Optisch</a></li>
        <li><a href="#" id="technicalIcon" data-icon="custom">Technisch</a></li>
</ul>
</div>

<div id="workOrderList" class="workOrders">

</div>

Ajax请求查看页面

<ul data-role="listview">
    <?php foreach($workOrders as $workOrder):?>
    <li>
        <h3><?php echo $workOrder['VisualWorkOrder']['title']?></h3>

    </li>

    <?php endforeach;?>
</ul>

Answer 1

您必须销毁并重新创建该页面。请参阅this链接

而不是:

$('.linkDiv').click(function(event) {        
  $('#contentDiv').load($(this).attr('href'));
  return false;
});

你应该这样做:

$('.linkDiv').click(function(event) {
    $.get($(this).attr('href'), function(data) {
        $('#contentDiv').html(data).page();
        $( "div[data-role=page]" ).page( "destroy" ).page();
    });
    return false;
});