使用Javascript动态添加Metro JS瓦片

Question

我有一个博客，我正在使用metro js。

My blog

Metro JS

我试图把一个按钮在页面的底部，将加载5个帖子在同一时间。

在我尝试动态加载Metro.js tiles之前，一切都很顺利。

下面的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;
        }

问题是，它正在添加磁贴，但它没有像其他磁贴一样使其可点击。我是不是漏掉了什么？

Answer 1

所以这个问题的答案很简单

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; 
    }
});

据我所知，这个类是如何将live-tile绑定到我这里的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; 
            }
        });

        }