modal（）不是函数，即使包含了DOM加载和bootstrap-modal.js

Question

我有以下事件监听器：

jQuery(document).ready(function() {
$('.start-selling').click(function(event){
    $('#sale-value').val($(this).data("value"));
    $('#mark_sold_modal').modal();
});
});

这会返回一个错误，即Uncaught TypeError: $(...).modal is not a function。在互联网上搜索显示，这通常是因为在调用函数时bootstrap-modal.js尚未加载。但是，不仅代码包含在jQuery(document).ready中，而且我已经检查了控制台，它显示在包含此代码的JS文件之前加载了Bootstrap Javascript：

如果我使用Bootstrap的数据API而不是我自己的Javascript，它可以工作并打开弹出窗口：

<button class="btn btn-success start-selling" data-toggle="modal" data-target="#mark_sold_modal" data-id="123" data-value="16.99">Mark as Sold</button>

这对我来说很奇怪，因为所有这些数据API本质上都是从modal()内部调用bootstrap-modal.js函数：

$(function () {
    $('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
      var $this = $(this), href
        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
        , option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())

      e.preventDefault()
      $target.modal(option)
    })
  })

我很乐意在不考虑这一点的情况下使用它，但我需要使用我自己的Javascript事件，因为我需要在显示给用户之前使用与点击的项目相关的一些数据填充模态。

请帮忙。如果需要，我可以完全重写模态功能，但我宁愿不花费宝贵的时间。

这是模态元素：

<div class="modal" id="mark_sold_modal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Item sale confirmation</h3>
    </div>
    <div class="modal-body">
        <div class="form-group">
            <label for="sale-value" class="col-md-4 control-label">Value</label>

            <div class="col-md-6">
                <input id="save-value" class="form-control span4" name="save_value" value="" required autofocus maxlength="64">
                <div class="help-block" id="save-value-error"></div>
            </div>
        </div>
        <div class="form-group">
            <label for="sale-date" class="col-md-4 control-label">Date</label>

            <div class="col-md-6">
                <input id="save-date" class="form-control span4" name="save_date" value="{{ $today }}" required maxlength="64">
                <div class="help-block" id="save-date-error"></div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal">Cancel</a>
        <a class="btn btn-success" id="filter-save">Mark as sold</a>
    </div>
</div>