使用Javascript动态添加Metro JS Tiles

Dynamically adding Metro JS Tiles with Javascript

本文关键字：JS Tiles Metro 添加 Javascript 动态 使用      更新时间：2023-11-10

我有一个博客，我正在上使用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; 
            }
        });
        }
相关文章：