Twitter 부트스트랩 Modal Close에 함수 바인딩

Twitter 부트스트랩 Modal Close에 함수 바인딩

저는 새로운 프로젝트에서 트위터 부트스트랩 lib를 사용하고 있으며, 모달 클로즈에 대한 최신 json 데이터를 새로 고치고 검색하기 위해 페이지의 일부를 원합니다.설명서 어디에도 이것을 볼 수 없습니다. 누군가가 저에게 그것을 지적하거나 해결책을 제안할 수 있습니까?

문서화된 방법 사용과 관련된 두 가지 문제

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

"숨기기" 클래스를 이미 모달에 첨부하여 페이지 로드 시 표시되지 않도록 하여 두 번 로드합니다.

숨김 클래스를 제거하고 요소 ID를 다음으로 설정하더라도display:none추가console.log("THE MODAL CLOSED");위의 기능에 근접했을 때 아무 일도 일어나지 않습니다.

부트스트랩 3 & 4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

부트스트랩 3: getbootstrap.com/javascript/ #modals-modals-filename

부트스트랩 4: getbootstrap.com/docs/4.1/components/modal/ #bootstrap

부트스트랩 2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

getbootstrap.com/2.3.2/javascript.html#modals → 이벤트 참조

부트스트랩 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

작업 예제는 다음 JSFidle을 참조하십시오.

https://jsfiddle.net/6n7bg2c9/

다음 문서의 Modal Events 섹션을 참조하십시오.

https://getbootstrap.com/docs/4.3/components/modal/ #http://events

부트스트랩 3(편집: 부트스트랩 4에서도 동일)을 시작하면서 이벤트를 시작할 수 있는 두 가지 인스턴스가 있습니다.

모달 "숨기기" 이벤트가 시작될 때

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

모달 "숨기기" 이벤트가 완료된 경우

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

참조: http://getbootstrap.com/javascript/ #js-http:

"live" 대신 "on" 이벤트를 사용해야 하지만 문서 개체에 할당해야 합니다.

사용:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

부트스트랩 5+ #ES6+

의존성 감소 -> 다른 프레임워크와 마찬가지로 부트스트랩은 새로운 이벤트 방법 덕분에 표준으로 돌아갈 것입니다.

var myModalEl = document.getElementById('myModalID');
myModalEl.addEventListener('hidden.bs.modal', function (event) {
    // do something...
});

작업 예제는 다음 JSFidle을 참조하십시오.

https://jsfiddle.net/Metamagikum/cw5f76bp/3/

공식 문서는 다음 위치에 있습니다.

https://getbootstrap.com/docs/5.0/components/modal/

부트스트랩은 모달을 사용자에게 숨기는 것이 끝났을 때 이벤트를 시작하려는 경우와 같이 모달에 후크할 수 있는 이벤트를 제공합니다. hidden.bs .bootstrap 이벤트는 다음과 같이 사용할 수 있습니다.

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

여기서 작동하는 피들을 확인하십시오. 여기서 모달 방법 및 이벤트에 대한 자세한 내용은 설명서를 참조하십시오.

부트스트랩 4:

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

hide.bs .dll:이 이벤트는 인스턴스 숨기기 메서드가 호출되면 즉시 실행됩니다.

hidden.bs .dll:이 이벤트는 모달이 사용자에게 숨겨져 있는 것이 끝나면 실행됩니다(CSS 전환이 완료될 때까지 기다립니다).

저는 다음과 같이 할 것입니다.

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

나머지는 이미 다른 사람들이 작성했습니다.또한 설명서를 읽을 것을 권장합니다.jquery - on method

부트스트랩 이벤트에 대한 답변을 많이 보았습니다.hide.bs.modal모달이 닫힐 때 트리거합니다.

이러한 이벤트에는 문제가 있습니다. 모달의 모든 팝업(팝오버, 툴팁 등)이 해당 이벤트를 트리거합니다.

모달이 닫힐 때 이벤트를 잡을 수 있는 다른 방법이 있습니다.

$(document).on('hidden','#modal:not(.in)', function(){} );

은 부트랩을 합니다.in모드가 열려 있을 때 클래스.사용하는 것은 매우 중요합니다.hidden수업 이후의 행사in할 때 됩니다.hide트리거됩니다.

IE8의 Jquery를 때문에 이.:not()선택자

모든 모달 클로즈에서 함수를 실행하려면 이 방법을 사용할 수 있습니다.

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

따라서 매번 모달 ID를 지정할 필요는 없습니다.

저도 같은 문제를 겪고 있었습니다.

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

이 페이지를 페이지 맨 아래에 배치해야 합니다. 맨 위에 배치하면 이벤트가 발생하지 않습니다.

언급URL : https://stackoverflow.com/questions/8363802/bind-a-function-to-twitter-bootstrap-modal-close