Блог

Я делал буклет с плагином MOLESKINE NOTEBOOK С БУКЛЕТОМ JQUERY, и я хочу динамически добавлять в него страницы, используя JS.

Хотя, когда я пытаюсь добавить страницу, все, что должно быть на отдельных страницах после заголовка, появляется на самой первой странице. И самое странное здесь то, что после нескольких обновлений или очистки кэша все остается как должно.

Итак, вот код книги:

 <div class="book_wrapper">
    <a id="next_page_button"></a>
    <a id="prev_page_button"></a>
    <div id="loading" class="loading">Загрузка книги...</div>
    <div id="mybook" style="display:none;">
        <div class="b-load" id="book_itself">
            <div>
                <img src="https://helpunicorn.pythonanywhere.com/static/logo.png" style="border-radius: 10px;">
                <h1>Книга добрых дел</h1>
                <br>
                <div style="text-align: center;">
                    <h2 id="user">Пользователь @</h2>
                </div>
            </div>
        </div>
    </div>
</div>
 

Предполагается, что каждая div страница должна быть отдельной страницей.

Это код моей функции JS:

 <script>
$.getJSON('https://helpunicorn.pythonanywhere.com/kdd-info/aadev151', function(data) {
    document.getElementById('title').innerHTML  = `${data[0].username} (${data[0].name})`
    document.getElementById('user').innerHTML  = data[0].username
    if (data.length != 1) {
        for (i = 1; i < data.length; i  ) {
            const div = document.createElement('div');
            div.innerHTML = `
                <h1>${data[i].name}</h1>
                <p>${data[i].info}</p>
            `;
            document.getElementById('book_itself').appendChild(div);
        }
    } else {
        document.getElementById('book_itself').innerHTML  = `
        <div>
            <h1>Упс... Эта книга пока пуста...</h1>
            <p>Узнайте, как заполнить её, на сайте</p>
            <br>
            <a href="http://helpunicorn.ru" target="_blank" class="article">
                <cufon class="cufon cufon-canvas" alt="Article" style="width: 41px; height: 16px;">
                    <canvas width="55" height="21" style="width: 55px; height: 21px; top: -2px; left: -4px;">
                    </canvas>
                    <cufontext>HelpUnicorn</cufontext>
                </cufon>
            </a>
        </div>
        `
    }
});
</script>
 

Итак, я считаю, что проблема не в коде, а в плагине, потому что, как я упоминал ранее, для этого просто требуется обновление или очистка кэша. Но мне интересно, в чем именно проблема с этим

Пожалуйста, посмотрите видео для лучшего понимания