부트 스트랩 3 문서의 모달 예제를 사용하고 있습니다. 모달이 작동합니다. 그러나 나는 그것이 실행될 때 show.bs.modal 이벤트에 액세스해야합니다. 지금은 시도하고 있습니다.
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
아무 일도 일어나지 않고 이벤트가 발생하지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까??? 이것은 나에게 의미가 없습니다.
답변:
이것을 사용하십시오 :
$(document).on('show.bs.modal','#myModal', function () {
alert('hi');
})
$(data).modal('show');.
$(document).on('hidden.bs.modal', function (e) { if (e.target.id === 'my-modal-id') { alert('hi'); } });. 여기에서 이드가 온다<div class="modal fade" id="my-modal-id">
$(document).on(...리스너를 문서 컨텍스트에 연결하고 대상 요소가 존재하는지 여부에 관계없이. 이벤트 이름을 첫 번째 인수로 추가하고 콜백 팬션을 마지막으로 추가해야하지만 쿼리 선택기를 두 번째 인수로 추가 할 수 있습니다
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.modal대신를 사용하는 것이 좋지만 show.bs.modal다른 이유로 배경을 숨기거나 모달이 표시되기 직전에 무언가를 설정하려면 show.bs.modal함수를 사용하십시오 .
$(document).on().
show.bs.modal다른 shown.bs.modal. 모달이 표시 되려고 할 때 전자가 실행됩니다. 표시되었을 때 후자. 크게 다릅니다.
show.bs.modal무엇입니까?
.modal('show'). 이 조동사 요구 네 개의 이벤트가 있습니다 : [ show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal] - 쇼 보여주는 경우, 표시 숨기기 위해 같은 숨겨진 보여줄 것입니다 때입니다. getbootstrap.com/docs/3.4/javascript/#modals-events
함수를 $(document).ready(function() {, 또는 더 간단하게 $(function() {. CoffeeScript에서는 다음과 같습니다.
$ ->
$('#myModal').on 'show.bs.modal', (event)->
이것이 없으면 JavaScript는 문서가로드되기 전에 실행되며 #myModal아직 DOM의 일부가 아닙니다. 다음은 Bootstrap 참조 입니다.
이 시도
$('#myModal').on('shown.bs.modal', function () {
alert('hi');
});
shown대신 사용하면 show함수 및 경고 끝에 세미 콜론이 있는지 확인하십시오.
비슷한 일이 나에게 일어 났고 setTimeout을 사용하여 해결했습니다.
부트 스트랩은 다음 시간 제한을 사용하여 표시를 완료합니다.
c.TRANSITION_DURATION = 300, c.BACKDROP_TRANSITION_DURATION = 150,
따라서 300 개 이상을 사용하면 작동해야하며 200은 작동합니다.
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
비슷하지만 다른 문제가 있었고 $ ( '# myModal')을 사용할 때 여전히 작동하지 않습니다. $ (window)를 사용할 때 작동하도록 할 수있었습니다.
내 다른 문제는 내 모달 div html 콘텐츠를 javascript 변수에 저장하면 show 이벤트가 발생하지 않는다는 것입니다.
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"호출 전이 아닌 뒤에 넣어야합니다.
다음과 같은 경우에는 작동하지 않는 경우가 있습니다.
1) 당신은 당신의 줄 앞에 자바 스크립트 코드에 오류가 $('#myModal').on('show.bs.modal'...)있습니다. 문제를 해결하려면 줄 앞에 경고 메시지를 넣어 페이지를로드 할 때 나타나는지 확인하십시오. 위의 JS를 제거하여 어느 것이 문제인지 확인하려면
2) 또 다른 문제는 JS를 잘못된 순서로로드하는 경우입니다. 예를 들어 $('#myModal').on('show.bs.modal'...)실제로 JQuery.js를로드하기 전에 파트를 가질 수 있습니다 . 이 경우 호출이 무시되므로 먼저 HTML (페이지 소스보기)에서 JQuery에 대한 스크립트 링크가 모달 onShow호출 위에 있는지 확인하십시오 . 그렇지 않으면 무시됩니다. 문제를 해결하려면 이전에 온 쇼 안에 경고를 넣으십시오. onShow 함수 내부가 아니라 이전의 것을 본다면 함수를 실행할 수 없다는 것이 분명합니다. 철자가 맞으면 JQuery.js에 대한 호출이 이루어지지 않았거나 해당 onShow부분 이후에 만들어진 것입니다.
$('#myModal').on('show.bs.modal'...)-JQuery 가로 드 된 후에 있어야합니다. 감사!
bootstrap4에서 동일한 문제가 발생했습니다. 해결책은 jQuery 문서 ready () 함수 안에 추가하는 것입니다.
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function () {
alert('hi')
})
}
제 경우에 문제는 어떻게 travelsize comment .. bootstrap.js와 jquery 사이의 수입 순서입니다. Metronic 템플릿을 사용하고 있고 전에 확인하지 않기 때문에
나는 jQuery의 이벤트 위임 / 버블 링을 사용했다. 아래를 참조하십시오.
$(document).on('click', '#btnSubmit', function () {
alert('hi loo');
})
아주 좋은 정보도 : https://learn.jquery.com/events/event-delegation/