Bootstrap Modal Bug?

Can Bootstrap's modal be re-used for multiple modals on one page?

by Jeromy French

HTML

<link rel="stylesheet" href="http://appliedinter.net/Workstream/common_files/Workstream.css">
<script src="http://appliedinter.net/Workstream/common_files/js/plugins.js"></script>
<script src="http://appliedinter.net/Workstream/common_files/js/script.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<!-- Buttons to trigger modal -->
<h1>Twitter Bootstrap Modal bug?</h1>
<p>
    While trying to use Bootstrap's modal plugin multiple times on one page, I noticed unexpected behavior. To duplicate:
    <ol>
        <li>Click on button "Modal 1"</li>
        <li>Notice that modal loads with text that starts "Phasellus <em>tincidunt gravida</em>..." (this text comes from <a href="http://fiddle.jshell.net/jhfrench/6K8rD/show/">http://fiddle.jshell.net/jhfrench/6K8rD/show/</a>)</li>
        <li>Click on button "Modal 2"</li>
        <li>Notice that modal loads with text that starts "Phasellus <em>tincidunt gravida</em>..." (this text was supposed to start "Phasellus <em>egestas est eu</em>..." and come from <a href="http://fiddle.jshell.net/jhfrench/AWSnt/show/">http://fiddle.jshell.net/jhfrench/AWSnt/show/</a>)</li>
        <li>Now reload this screen (F5), then click on button "Modal 2" and notice that the modal loads with text "Phasellus <em>egestas est eu</em>..."</li>
        <li>Click on button "Modal 1" and notice that modal still only shows "Phasellus <em>egestas est eu</em>..."</li>
    </ol>
</p>
<hr />
<h3>This button shows a modal (<code>#utility</code>) with text "Phasellus <em>tincidunt gravida</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/6K8rD/show/" data-target="#utility" class="btn">Modal 1</a><br />
<h3>This button should invoke the same modal (<code>#utility</code>), but fill it with text "Phasellus <em>egestas est eu</em>..."</h3>
<br />
<a id="file_attach" data-toggle="modal" href="http://fiddle.jshell.net/jhfrench/AWSnt/show/"...

JavaScript

$('a[data-toggle="modal"]').on('click', function(){
        // update modal header with contents of button that invoked the modal
        $('#myModalLabel').html( $(this).html() );
        //fixes a bootstrap bug that prevents a modal from being reused
        $('#utility_body').load(
            $(this).attr('href'),
            function(response, status, xhr) {
                if (status === 'error') {
                    //console.log('got here');
                    $('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
                }
                return this;
            }
        );
    });