Бутон за стартиране с бутон и бутон за затваряне програмно при натискане на бутон - jquery, twitter-bootstrap, падащо меню

Имам 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.

Отговори:

Не забравяйте, че .click() добавя манипулатори за извикване по ред. Ако добавите .btn-create селектора на първия манипулатор, за да спре разпространението, след това stopPropagation() се извиква преди обработващия, който е специфичен за .btn-create, Въпреки това, ако включите e.stopPropagation(); в манипулатора за кликвания за .btn-create, тогава трябва да работи както се очаква.

Вижте цигулка: http://jsfiddle.net/Palpatim/vuNA7/3/