使用Javascript动态添加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;
        }

函数loadmore（）{
var tiles=document.getElementById（“tiles”）.innerHTML；
瓷砖=瓷砖+标题；
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; 
    }
});

据我所知，类livetile是如何与我这里的click处理程序联系在一起的。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; 
            }
        });

        }

函数loadmore（）{
var tiles=document.getElementById（“tiles”）.innerHTML；
瓷砖=瓷砖+标题；
document.getElementById（“tiles”）.innerHTML=tiles；
$（“.live tile”）.liveTile({
单击：函数（$tile，tileData）{
变量id=$tile.attr（“id”）；
window.location=“postpage.php？name=“+id；
返回false；//或返回true；
}
});
}