Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.

The first button (original button) appears when page loads:
![enter image description here](https://i.stack.imgur.com/HPRmM.png)

The second button (inserted button) is inserted by clicking the yellow box:
![enter image description here](https://i.stack.imgur.com/D7XkX.png)

The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.

What can I do to enhance the inserted button with CSS styles?

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>          

        <script type="text/javascript">
            function insert(){
                $("#result").html('<input type="button" value="Inserted button"/>');
            }
        </script>

    </head>
    <body>
        <form>

            <p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>

            <input type="button" value="Original button" />

            <div id="result">
                Button not inserted yet  
            </div>

        </form>
    </body>
</html>

```