programing

bootstrap jquery show.bs . modal 이벤트가 발생하지 않습니다.

muds 2023. 10. 13. 22:36
반응형

bootstrap jquery show.bs . modal 이벤트가 발생하지 않습니다.

부트스트랩 3 문서의 모달 예시를 사용하고 있습니다.모달 작업하지만 show.bs . modal 이벤트가 실행되면 접속해야 합니다.지금은 그냥 노력하고 있습니다.

$('#myModal').on('show.bs.modal', function () {
   alert('hi')
})

아무 일도 일어나지 않아요, 사건은 발생하지 않아요.내가 뭘 잘못하고 있는 거지??이건 말이 안 돼요.

사용 방법:

$(document).on('show.bs.modal','#myModal', function () {
  alert('hi');
})

꼭 .on('shown.bs.modal')

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
});
$("#myModal").modal('show'); //This can also be $("#myModal").modal({ show: true });

아니면

$("#myModal").on("shown.bs.modal", function () { 
    alert('Hi');
}).modal('show');

어떤 분야에 집중하기 위해서는 더 나은 방법을 사용하는 것이 좋습니다.shown.bs.modalshow.bs.modal을 숨기거나 show.bs.modal기능.

을 합니다.$(document).ready(function() { }) 말하자면, ,$(function() { CoffeeScript에서, 이것은 다음과 같습니다.

$ ->
  $('#myModal').on 'show.bs.modal', (event)->

되고,#myModal아직 DOM의 일부가 아닙니다.여기 부트스트랩 참조가 있습니다.

$(document).on('shown.bs.modal','.modal', function () {

/// TODO EVENTS

});

이거 먹어봐요.

$('#myModal').on('shown.bs.modal', function () {
   alert('hi');
});

으로.shownshow또한 기능과 경보가 끝날 때 세미콜론을 가지고 있어야 합니다.

추가할 내용:

$(document).ready(function(){
    $(document).on('shown.bs.modal','.modal', function () {
         // DO EVENTS
    });
});

비슷한 일이 저에게도 일어났고 setTimeout으로 해결했습니다.

부트스트랩이 다음 시간 초과를 사용하여 표시를 완료하고 있습니다.

c.Transition_Duration=300,c.배경_트랜지션_듀레이션=150,

따라서 300개 이상을 사용하는 것이 효과적이며, 저의 경우 200개가 효과적입니다.

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})

제 경우에는 .modal-dialog div를 놓쳤어요

이벤트가 발생하지 않습니다: shown.bs .

<div id="loadingModal" class="modal fade">
  <p>Loading...</p>
</div>

발사 이벤트: shown.bs .

<div id="loadingModal" class="modal fade">
  <div class="modal-dialog">      
    <p>Loading...</p>
  </div>
</div>

이것은 코드가 이전에 실행되었을 수도 있고 표시되지 않을 때 발생하므로 tp fire에 대한 timeout()을 추가할 수 있습니다.

$(document).on('shown.bs.modal', function (event) {
      setTimeout(function(){
        alert("Hi");
      },1000); 
    });

부트스트랩4에서도 같은 문제가 있었습니다.해결책은 jQuery document ready() 함수 안에 추가하는 것이었습니다.

$(document).ready(function() {
    $('#myModal').on('show.bs.modal', function () {
       alert('hi')
    })
})

$('#myModal')을 사용할 때에도 유사하지만 다른 문제가 발생하여 여전히 작업을 할 수 없습니다.$(윈도우)를 사용하면 작동할 수 있었습니다.

저의 또 다른 문제점은 제 modal div html 콘텐츠를 javascript 변수에 저장하면 쇼 이벤트가 발생하지 않는다는 것을 발견한 것입니다.

var content="<div id='myModal' ...";
$(content).modal();
$(window).on('show.bs.modal', function (e) {
  alert('show test');
});

그 사건은 발생하지 않았기 때문에 결코 발생하지 않았습니다.

내 해결책은 html 본문에 div들을 포함시키는 것이었습니다.

<body>
    <div id='myModal'>
       ...
    </div>
    <script>
        $('#myModal).modal();
        $(window).on('show.bs.modal', function (e) {
            alert('show test');
        });
    </script>
</body>

스크립트는 이전이 아닌 "js/bootstrap" 호출 뒤에 놓는 것을 기억하세요.

같은 문제가 있었습니다.저는 jquery를 이 순서대로 두 번 로드했습니다.

  1. 로드된 jQuery
  2. 로드된 부트스트랩
  3. jQuery를 다시 로드했습니다.

jQuery가 두 번째로 로드되었을 때 어떻게든 부트스트랩에 대한 참조를 깨고 modal이 열렸지만 ('shown.bs 에서..') 메소드는 발사되지 않았습니다.

부트스트랩을 사용하기 전에 jQuery를 로드하고 있는지 확인합니다.기본적으로 들리지만, 이러한 모달 이벤트를 잡는 데 문제가 있었고 오류가 내 코드가 아니라 jQuery 이전에 부트스트랩을 로드하고 있었습니다.

다음과 같은 경우에는 작동하지 않는 경우가 있습니다.

) 를 줄.$('#myModal').on('show.bs.modal'...)할 때 줄 에 알림 메시지를 문제를 해결하려면 페이지를 로드할 때 알림 메시지가 뜨는지 확인하기 위해 줄 앞에 알림 메시지를 놓습니다.의 JS

2) JS 를입니다.예를 들어 당신은 다음을 가질 수 있습니다.$('#myModal').on('show.bs.modal'...)JQuery.js를 로드하기 전에 part를 실행합니다.이 되므로 HTML저 JQuery합니다 onShow호출, 그렇지 않으면 무시됩니다.문제를 해결하려면 알림을 표시하기 전에 알림을 표시합니다.에 있는 에 있는 Show합니다에서 할 수 이 분명합니다 호출이 면 .js다 됩니다.onShow

다른 jquery modal이 아닌 bootstrap jquery modal을 사용해야 합니다.

이 일에 너무 많은 시간을 낭비했습니다...

나의 경우 문제는 어떻게 여행 크기의 댓글을 다는 것입니다.bootstrap.js와 jquery 사이의 가져오기 순서입니다.왜냐하면 나는 템플릿 메트로닉을 사용하고 있고 전에 확인하지 않았기 때문입니다.

저는 jQuery의 이벤트 사절단을 이용했습니다. / 버블링...저한테는 통했어요아래 참조:

$(document).on('click', '#btnSubmit', function () {
                alert('hi loo');
            })

또한 아주 좋은 정보: https://learn.jquery.com/events/event-delegation/

은 을 입니다.setTimeout어떤 경우에는 효과가 있을 수 있지만, 끔찍한 해결책입니다.나는 그것을 포장하는 동안 그것을 사용했습니다.$(document).ready()물론 (그러나 그것은 도움이 되지 않았습니다) 하지만 저는 결코 믿을 만한 해결책을 가질 수 없었습니다.일부 은 다른 보다 더 저/되며,1000ms부족했습니다. 왜가 났는지 .$(document).ready()도움이 안 됐어요, 그래서 :

저는 다른 접근법을 취했습니다.

저는 모달을 처음 사용해야 할 때 모달 이벤트를 구독합니다.

<a href="javascript:void(0)" onclick="ShowModal()">Open my modal</a>

그리고 JS측에서는:

function ShowModal() {
    InitModalEventsOnce();
    $('#MyModal').modal('show');
}

var InitModalEventsIsDone = false; // Flag to keep track of the subscribtion

function InitModalEventsOnce() {

    if (!InitModalEventsIsDone) {
        InitModalEventsIsDone = true;

        $('#MyModal').on('shown.bs.modal', function () {
            // something
        })

        $('#MyModal').on('hidden.bs.modal', function (e) {
            // something
        });
    }
}

그것으로 끝!내가 찾은 유일한 신뢰할만한 해결책.

이렇게 해보세요.

let mymodal=$('#myModal');
mymodal.on('show.bs.modal', function () 
{
    alert('hi')
});

네이티브 자바스크립트 이벤트 리스너 작업:

$('#myModal')[0].addEventListener('shown.bs.modal', () => { 
    alert('hi');
});

아니면

document.getElementById('myModal').addEventListener('shown.bs.modal', () => {   
    alert('hi');
});

자세한 내용은 다음과 같습니다.

show.bs .modal는 모델 대화상자 로드 중에 작동합니다. shown.bs .modal는 로드 후에 어떤 작업도 수행했습니다.후 렌더링

언급URL : https://stackoverflow.com/questions/19279629/bootstrap-jquery-show-bs-modal-event-wont-fire

반응형

'programing' 카테고리의 다른 글

Angular2 라우터 keep 쿼리 문자열  (0) 2023.10.13
값이 0인 프로젝트만 표시하려면 어떻게 해야 합니까?  (0) 2023.10.13
"시스템 호출 차단"이란 무엇을 의미합니까?  (0) 2023.10.13
socket.io 에서 클라이언트의 IP 주소 가져오기  (0) 2023.10.13
jQuery - 요소에 클래스가 있는 경우 이렇게 합니다.  (0) 2023.10.13

'programing'의 다른글

  • 현재글bootstrap jquery show.bs . modal 이벤트가 발생하지 않습니다.

관련글

댓글

티스토리툴바