[javascript] 부모 modal 안에 자식 modal을 닫았을 때 부모 modal로 인식하는 경우, A modal 안에 B modal 이벤트가 A modal로 인지할 때, modal 2개 이벤트

 

 

 

#testModal 안에 #smallModal이 있다. 

#testModal이 큰 모달이고 그 안에 #smallModal이 있다. 

 

 

 

 

#testModal 을 닫았을 때 check 값을 true로 주고 조건을 걸어서 작업을 하려고 하는데 

modal 안에 있는 작은 modal을 닫았더니 check 값이 true로 설정되어 내가 원하는 작업을 수행할 수 없었다.

 

 

 

 

 

 

방법을 찾아본 결과, 아래와 같이 해결할 수 있었다.

 

var check = false;
$('#testModal').on('hidden.bs.modal', function (event) {
    var target = event.target;
    var relatedTarget = event.relatedTarget;

    // 이벤트가 발생한 요소와 그의 자식 요소인지 확인
    if (target.id === 'testModal' && $(relatedTarget).closest('#testModal').length === 0) {
		check = true;
    }
});

 

1. 현재 hidden 이벤트를 수행하는 modal의 id가 내가 조건을 걸려고 하는 model의 id와 같은지 비교하고 

2. 현재 hidden 이벤트를 수행하는 modal이 내가 조건을 걸려고 하는 modal의 자식 요소인지를 확인한다.

 

 

 

closest('#testModal').length === 0 이라면 자식(작은 modal)이 아니라 조건을 걸려고 하는 #testModal 이 맞는 것이다!