2

In this jsFiddle example...

http://jsfiddle.net/LFgSr/

... I am trying to add jQuery Mobile-style buttons inside a div after the page has been loaded. The big button that appears on the page when the page loads looks great... but when I try to add another similar-looking button "on the fly" (by clicking "Add another button"), it doesn't get styled as it's supposed to (even though I am 'appending' the correct HTML code for the button via jQuery).

Here is the full code...

<!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>

What am I missing here? How do I get jQuery Mobile to recognize dynamic updates to the HTML like that?

Thanks!

Gajotres
  • 57,309
  • 16
  • 102
  • 130
NotQuiteThereYet
  • 477
  • 3
  • 13
  • 25

1 Answers1

3

Here's a working example: 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();
    });
});

When you dynamically add a new jQM content, jQM must also enhance new content. And in case of button it is done with a:

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

To find out more about it take a look at my other answer/article: jQuery Mobile: Markup Enhancement of dynamically added content

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 1
    Gajotres... I just read your other article. Very helpful! 1 more quick question though, if you don't mind. Say I want to enhance the entire page, *except* for 1 specific item. For example... in my jsFiddle example, I want to enhance everything in the big rectangular div (the big buttons), but I don't want to enhance the little button at the top (#addButton). How would I do that? – NotQuiteThereYet Apr 03 '13 at 20:05
  • you would add a data-role="none" to that button, this will prevent that button styling – Gajotres Apr 03 '13 at 20:14