Добавление элементов jQuery Mobile на страницу после ее загрузки?

В этом примере jsFiddle...

http://jsfiddle.net/LFgSr/

... Я пытаюсь добавить кнопки в стиле jQuery Mobile внутри div после загрузки страницы. Большая кнопка, которая появляется на странице, когда страница загружается, выглядит великолепно... но когда я пытаюсь добавить еще одну похожую кнопку "на лету" (нажав "Добавить другую кнопку"), она не выглядит как это должно быть (хотя я «добавляю» правильный HTML-код для кнопки через jQuery).

Вот полный код...

<!DOCTYPE html>
<html>

<head>

    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

</head>

<body>

    <!-- Mark-up -->

    <input id="addButton" type="button" value="Add Another Button">

    <div style="width: 300px; height: 400px; top: 50px; left: 10px; position: absolute; border: 1px solid black;" >
        <section id="page1" data-role="page">
            <div class="content" data-role="content">
            <a href="#" data-role="button">This is a button!</a>
            </div>
        </section>
    </div>

    <!-- Script -->

    <script>
        $(document).ready(function() {
            $('#addButton').click(function() {
                $('.content').append('<a href="#" data-role="button">This is another button!</a><br />');
            });
        });
    </script>

</body>
</html>

Что мне здесь не хватает? Как заставить jQuery Mobile распознавать такие динамические обновления HTML?

Спасибо!


jquery markup jquery-mobile jquery-mobile-button
person NotQuiteThereYet    schedule 03.04.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вот рабочий пример: http://jsfiddle.net/Gajotres/2uerX/

$(document).on('pagebeforeshow', '#index', function(){       
    $('#addButton').click(function() {
        $('.content').append('<a href="#" data-role="button">This is another button!</a><br />');
        $('[data-role="button"]').button();
    });
});

Когда вы динамически добавляете новый контент jQM, jQM также должен улучшать новый контент. А в случае кнопки это делается с помощью:

$('[data-role="button"]').button();

Чтобы узнать больше об этом, взгляните на мой другой ответ/статью: jQuery Mobile: улучшение разметки динамически добавляемого контента

person Gajotres    schedule 03.04.2013
comment
Гайотрес... Я только что прочитал другую вашу статью. Очень полезно! Хотя, если вы не возражаете, еще один быстрый вопрос. Скажем, я хочу улучшить всю страницу, за исключением одного конкретного элемента. Например... в моем примере jsFiddle я хочу улучшить все в большом прямоугольном div (большие кнопки), но я не хочу улучшать маленькую кнопку вверху (#addButton). Как бы я это сделал? - person NotQuiteThereYet; 04.04.2013
comment
вы бы добавили data-role=none к этой кнопке, это предотвратит стиль этой кнопки - person Gajotres; 04.04.2013