引导模式只对远程数据源启动一次

我有一个带有项目列表的表，每个项目都有一个带状态列表的<select>。流程如下。

• 当状态更改时，它应该激发一个模态
• 模态正在拉入ajax数据，并且运行良好
• 然后，用户可以在模式框中单击"继续"或"取消"

这是第一次工作，但一旦模态被忽略，模态就不会再加载第二次。数据正在更新——我可以在inspect元素中看到它，但模态本身不会触发不止一次。

这是相关代码：

HTML:

<select class="status form-control" data-id="14" data-ref="PT6F7SW514" name="status">
    <option value="0" selected="selected">Pending</option>
    <option value="1">Approved</option>
    <option value="2">Rejected</option>
</select>
...
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal Goes Here</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send</button>
            </div>
        </div>
    </div>
</div>

JS:

$(document).ready(function(){
    $('.status').change(function(){
        var status = $(this);
        var val = $(status).val();
        var id = $(status).attr('data-id');
        var ref = $(status).attr('data-ref');
        $('.modal-body').load('/ajax/status/' + ref + '/' + val);
        $('#modal').modal();
    });
});

同样，这是一个包含多个项目的表，每个项目都有一个.status选择字段。我可以在控制台中看到第二次尝试激发模态时我得到了以下错误：

Uncaught TypeError: undefined is not a function

与JS中的此行关联：

$('#modal').modal();

如果我注释掉$('.modal-body').load()，它就起作用了。

我尝试将它重写为一个单独的ajax调用，而不是使用.load()，但我也遇到了同样的问题。似乎只要我操纵".modal body"，它就失去了激发模态的能力。