ajax - Bootstrap 下拉项与 Ajax 源的绑定

Question

我有 Bootstrap 下拉按钮，我想在用户单击此下拉按钮时获取数据，而不是在页面加载时需要加载国家/地区列表，这是我的代码；

<div class="btn-group">
<input class="text-box single-line" data-val="true" data-val-required="The Country field   is required." id="Country" name="Country" type="text" value="US" />
<a class="btn dropdown-toggle country" id="country" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu countrys" role="menu" aria-labelledby="dropdownMenu">
   //store country list
</ul>
</div> 

我单击下拉按钮，它无法触发 jquery 工作，似乎 Bootstrap 不允许自定义下拉功能。

$(document).ready(function () {
        $('#country').click(function () {
            // Only call notifications when opening the dropdown
            if (!$(this).hasClass('open')) {
                $.ajax({
                    type: "GET",
                    url: "/getCountries",
                    async: false,
                    dataType: "script"
                });
            }
        });
    });

Answer 1

您可以尝试在 dropdown-open 事件中添加 ajax 请求。像这样的东西：

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

show.bs.dropdow——这个事件在调用 show 实例方法时立即触发。切换锚元素可用作事件的 relatedTarget 属性。