Question

经过这么多试验，我终于设法使用PHP，JSON和AJAX动态创建页面并将它们加载到DOM中。但现在的问题是我无法动态调用/浏览这些页面，而是手动调用gallery.html#page1 ...etc。

我在寻求指导而不是给你带来负担，因为我在这里学习。

** PHP - photos.php **

$photos = array();
$i=0;
while ($row = mysqli_fetch_array($query)){
 $img = $row["fn"];
 $photos[] = $img;
 $i++;
}

$count = count($photos);
echo json_encode(array('status' => 'success', 'count' => $count, 'items' => $photos));

JSON数组

{
"status":"success",
"count":3,
"items":
 [
"img1.jpg",
"img2.jpg",
"img3.jpg"
 ]
}

我使用以下方法来获取和存储所需图库的ID，

<input type="hidden" value="<?php echo $id; ?>" id="displayid" />

然后我回调它在AJAX中使用它。

var ID = $('#displayid').val();

AJAX和JQM

$.ajax({
Type: "GET",
url: 'photos.php',
data: { display: ID }, // = $('#displayid').val();
dataType: "json",
contentType: "application/json",
success: function(data) {
 var count = data.count;
 var number = 0;
 $.each(data.items, function(i,item) {
  var newPage = $("<div data-role=page data-url=page" + number + "><div data-role=header><h1>Photo " + number + "</h1></div><div data-role=content><img src=" + item + " /></div></div");
  newPage.appendTo( $.mobile.pageContainer );
  number++;
  if (number == count) { $.mobile.changePage( newPage ); }; // it goes to last page

我从here获得此代码，感谢Gajotres在页面之间动态导航。它在同一个代码中。

$(document).on('pagebeforeshow', '[data-role="page"]', function(){       
 var nextpage = $(this).next('div[data-role="page"]');
 if (nextpage.length > 0) {    
  $.mobile.activePage.find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'b'}).addClass('ui-btn-right').html('Next').button());
 }  
}); // next button 
}); // each loop 
} // success
}); //ajax

Answer 1

我找到了你的问题。

这部分代码不能像这样使用：

$(document).on('pagebeforeshow', '[data-role="page"]', function(){       
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {    
        $.mobile.activePage.find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'b'}).addClass('ui-btn-right').html('Next').button());
    }  
});

这就是问题所在。首先删除pagebeforeshow事件绑定，这里不能使用它。其余的代码不会做任何事情，因为目前有任何下一页（下一页将在下一次循环迭代期间生成），所以删除整个块。

现在，在每个块结束并生成所有页面之后（这是主要的，此时所有页面都应该存在），添加以下代码：

$('[data-role="page"]').each(function(){
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {    
        $(this).find('[data-role="header"]').append($('<a>').attr({'href':'#'+nextpage.attr('id'),'data-theme':'a'}).addClass('ui-btn-right').html('Next').button());
    }         
});

这将会发生。每个循环将循环遍历每个可用页面（我们现在都已经完成），如果不是最后一个，它将添加下一个按钮。

以下是一个实例：http://jsfiddle.net/Gajotres/Xjkvq/

好的，在这个示例页面已经存在，但点是相同的。它们需要存在（无论是否动态添加它们或者它们是否已存在），然后才能添加下一个按钮。

我希望这会有所帮助。

无法在DOM中导航动态创建的页面

1 个答案: