Question

我有一个博客，我正在使用地铁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;
        }

问题在于它正在添加瓷砖，但它不会像其他瓷砖那样使其可点击。有什么我想念的吗？

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

        }

使用Javascript动态添加Metro JS Tiles

1 个答案: