jQM - Dynamic button DEMO

by Leo

HTML

<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <a id="button" data-role="button">Add new dynamic button</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

JavaScript

$(document).on('pagebeforeshow', '#index', function(){    
    $(document).on('click', '#button', function(){        
        //var buttonNo = $('[data-role="button"]').length        
        // Add a new button element
        $('[data-role="content"]').append('<a data-role="button" data-theme="b" data-icon="plus" data-iconpos="right">Save</a>');
        // Enhance new button element
        $('[data-role="button"]').button();        
    });   
});