Динамическое добавление плиток Metro JS с использованием Javascript

Question

Динамическое добавление плиток Metro JS с использованием Javascript

0

У меня есть блог, в котором я использую metro js on

Мой блог

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

Проблема в том, что он добавляет плитку, но не делает ее кликабельной, как другие плитки. Есть что-то, чего я не хватает?

Anthony Russell 28 нояб. 2013, в 01:36

Источник

Теги:

javascript

html

1 ответ

Ещё вопросы

Anthony Russell · Answer 1 · 2013-11-28T00-52-00.000Z

Поэтому ответ на этот вопрос довольно прост

В файле 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; 
            }
        });

        }