부트 스트랩 모달과 datepicker 쇼 이벤트

Question

datepicker (http://www.eyecon.ro/bootstrap-datepicker/)를 클릭하면 그의 SHOW 이벤트가 발생하지만 모달의 SHOW.BS.MODAL도 실행됩니다. 문제가있는 곳은 어디입니까?

$(document).ready(function() { 
$('#ArrDate') 
.datepicker() 
.on("show", function(event){ 
    alert("Q"); 
}); 

$("#dlg3000to3100") 
.on('show.bs.modal', function (event) { 
    alert("W"); 
}); 

$("#dlg3000to3100") 
.modal("show"); 
}); 

예를 Example

감사

Answer 1

버그 것 같다 (또는 기능?)를 날짜 선택기의. 당신이 할 수있는 일은 show.bs.modal 이벤트가 대화창에 도달하는 것을 막는 것입니다.

$('#ArrDate').on('show.bs.modal', function (event) { 
    event.stopPropagation(); 
}); 

이

그렇게 show.bs.modal '버블'하지 않습니다 대화 상자에 이벤트 전파를 날짜 선택기 수준에서 이벤트를 감지하고 중지합니다.

Answer 2

showpage 이벤트를보고있는 datepicker가 원인 인 유사한 문제가있었습니다.

하나의 옵션은 모달에 표시된 이벤트를 사용하는 것입니다 그러나 이것은

$('#dlg3000to3100').on('shown.bs.modal', function (event) { 
    // modal code in here 
}); 

더 우아한 해결책은 이벤트

$('#dlg3000to3100').on('show.bs.modal', function (event) { 
    if(event.namespace !== 'bs.modal') return; 
    // modal code in here 
}); 

https://jsfiddle.net/bzh75tww/의 네임 스페이스를 확인하는 것입니다 모든 경우에 적합하지 않습니다

Answer 3

또 다른 해결 방법은 show.bs.modal을 으로 바꾸는 것입니다 .bs 모달 모달 이벤트.

modal.on('shown.bs.modal', function (event) { 
       // Do something 
      }); 

그러나 네임 스페이스 체크

modal.on('show.bs.modal', function(e) { 
    if (e.namespace === 'bs.modal') { 
     // Do something 
    } 

에게 표시와 쇼를 교체하거나 숨겨진 사용하여 숨길 수없는 경우

});