我有一个博客,我正在上使用metro-js
我的博客
Metro JS
我试图在页面底部放一个按钮,一次可以加载5个帖子。
一切都很顺利,直到我尝试动态加载Metro.js瓷砖。
下面的javascript函数只是一个演示。我计划做一个ajax调用,但我甚至还不能让演示工作。
什么负载启动
<div class="tiles">
<div id="id#" class="live-tile four-wide" data-mode="none" data-bounce="true">
<div style="background-color:orange;">
<table><tr><td><img src="textsym.png" width="50"/></td>
<td><h1>title</h1></td></tr>
</table>
</div>
</div>
</div>
这就是我尝试的
function loadmore() {
var tiles = document.getElementById("tiles").innerHTML;
tiles = tiles + "<div class="tiles"><div id="" class="live-tile four-wide" data-mode="none" data-bounce="true"><div style="background-color:orange;"><table><tr><td><img src="textsym.png" width="50"/></td><td><h1>title</h1></td></tr> </table></div></div>";
document.getElementById("tiles").innerHTML = tiles;
}
问题是它添加了互动程序,但并没有像其他互动程序那样使其可点击。我有什么东西不见了吗?
所以这个问题的答案很简单
JS文件需要被告知页面上有新元素。
当页面最初加载时,根据metro-js文档,您可以运行这个JQuery函数
$(".live-tile").liveTile({
click: function ($tile, tileData) {
var id = $tile.attr("id");
window.location = "postpage.php?name=" + id;
return false; // or return true;
}
});
据我所知,类活动磁贴是如何与我这里的点击处理程序联系在一起的。postpage.php…
所以我所做的只是将这个JQuery调用添加到上面的按钮单击函数中。这将刷新页面并使一切正常工作。
function loadmore() {
var tiles = document.getElementById("tiles").innerHTML;
tiles = tiles + "<div class="tiles"><div id="" class="live-tile four-wide" data-mode="none" data-bounce="true"><div style="background-color:orange;"><table><tr><td><img src="textsym.png" width="50"/></td><td><h1>title</h1></td></tr> </table></div></div>";
document.getElementById("tiles").innerHTML = tiles;
$(".live-tile").liveTile({
click: function ($tile, tileData) {
var id = $tile.attr("id");
window.location = "postpage.php?name=" + id;
return false; // or return true;
}
});
}