带有按钮项的引导下拉菜单并在单击按钮时以编程方式关闭

Question

我有一个 Bootstrap 2.3.2 按钮下拉菜单。我在下拉菜单中有复选框和一个按钮。如果我单击任何复选框，尤其是单击按钮，我想保持下拉菜单处于打开状态。一旦按钮后面的操作完成，我想手动关闭下拉菜单。这是 HTML：

<div class="btn-group">
    <input type="hidden" name="order_item_id" value="<?=$item->id?>">
    <button data-toggle="dropdown" class="btn btn-mini dropdown-toggle" data-container="body"><i class="icon icon-plus"></i> Create tasks <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks1" id="form_create_tmpl_tasks1">Order material</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks2" id="form_create_tmpl_tasks2">Order accessories</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks3" id="form_create_tmpl_tasks3">Order CNC parts</label></li>
      <li class="divider"></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks4" id="form_create_tmpl_tasks4">SW development (confirm delivery)</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks5" id="form_create_tmpl_tasks5">HW development (confirm delivery)</label></li>
      <li class="divider"></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks6" id="form_create_tmpl_tasks7">Order ALU</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks7" id="form_create_tmpl_tasks8">Mill CNC parts</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks8" id="form_create_tmpl_tasks9">Anodize</label></li>
      <li><label class="checkbox"><input type="checkbox" name="create_tmpl_tasks9" id="form_create_tmpl_tasks10">Laser gravure</label></li>
      <li class="divider"></li>
      <li class="action"><button type="button" class="btn btn-small btn-create">Create</button></li>
    </ul>
</div>

如果我点击带有此代码的复选框，我已经设法禁用下拉关闭：

$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
    e.stopPropagation();
});

如果我在此选择器中也包含该按钮，则该按钮将不会接收点击事件，这是我不想要的。我想在单击按钮时执行一些 AJAX 调用，当我得到结果时，我想关闭下拉菜单。像这样的：

$('.btn-create').live('click', function(e){
    e.preventDefault();
    var btn = $(this);
    btn.button('loading');
    $.ajax({
        url: 'url',
        dataType: 'json',
        type: "POST",
        success: function(data) {
            btn.button('reset');
            // close drop down here
        },
        error:function (xhr, ajaxOptions, thrownError){
            btn.button('reset');       
        }
    });
});

这里是jsFiddle。

Answer 1

请记住，.click() 按顺序添加要调用的处理程序。如果将.btn-create 选择器添加到第一个处理程序以停止传播，则stopPropagation() 代码将在特定于.btn-create 的处理程序之前被调用。但是，如果您在 .btn-create 的点击处理程序中包含 e.stopPropagation();，那么它应该可以按预期工作。

见小提琴：http://jsfiddle.net/Palpatim/vuNA7/3/