버튼 항목으로 부트 스트랩 드롭 다운 버튼 클릭시 프로그래밍 방식으로 닫습니다.

Question

부트 스트랩 2.3.2 버튼 드롭 다운 메뉴가 있습니다. 체크 박스와 버튼이 드롭 다운 안에 있습니다. 확인란 중 하나를 클릭하면 특히 드롭 다운을 열어두고 싶습니다. 특히 버튼을 클릭하면됩니다. 버튼 뒤의 동작이 완료되면 드롭 다운을 수동으로 닫으려고합니다. 나는이 코드를 체크 박스를 클릭하면 가까운 드롭 다운을 사용하지 않도록 관리해야

<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> 

: 다음은 HTML입니다 나는이 선택의 버튼을 포함하는 경우

$('.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 선택기를 첫 번째 처리기에 추가하면 .btn-create에 특정한 처리기 전에 stopPropagation() 코드가 호출됩니다. 그러나 .btn-create의 클릭 핸들러에 e.stopPropagation();을 포함하면 예상대로 작동합니다.

참조 바이올린 : http://jsfiddle.net/Palpatim/vuNA7/3/