javascript - Bootstrap Dropdown 动态 ajax 列表项

Question

我使用 Bootstrap Dropdown，我试图在显示下拉列表之前通过 AJAX 动态填充列表项。我的脚本必须从数据库中获取可用项目并将它们插入

我阻止了默认事件，执行 ajax 并在之后触发，但“数据”未定义，我没有看到下拉列表。像这样的脚本通常可以正确处理表单。

    $(".dropdown").on("show.bs.dropdown", function(e, data){
    ths = $(this);
    if (data == 'okay') return true;
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/core/test.php',
        data: 'test'
    }).done(function(response) {
        $(ths).children('ul').html(response);
        $(ths).trigger('click.bs.dropdown', 'okay');
    });

});

html:

<div class="dropdown">
   <a data-toggle="dropdown" 
      class="btn dropdown-toggle">My list <b class="caret"></b>
   </a>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      ...data from ajax puts here...
   </ul>
</div>

我该如何解决？谢谢。

Answer 1

Bootstrap 事件不传递参数，在您的代码中您期望 e 和 data。
您应该检查 ul 是否已经有 child ，如果它没有获取一些 child 并追加他们。