Magnific popup - 모달 내에서 버튼을 참조하는 방법?

Question

단추가있는 모달 인라인을 만드는 경우 ... 각을 클릭 할 때 특정 동작을 수행 할 수 있기를 원합니다. 그러나, 나는 모달에 생성 된이 버튼을 잡을 수 없습니다.

내가 어떻게 잡을 수 있는지 아는 사람 있습니까?

$('.open-popup-link').magnificPopup({ 
    items: { 
     type: 'inline', 
     src: $('<div class="white-popup">\ 
        <h4>Are you sure you were discharged for failing a drugs test?</h4>\ 
        <p>You will not be able to change your answer once you have submitted these details.</p>\ 
        <button id="test-popup-no">No, I\'ve made a mistake</button>\ 
        <button id="test-popup-yes">Yes, I\'m sure</button>\ 
        </div>') 
    }, 
    type: 'inline', 
    midClick: true 
}); 

해당 ID에 따라 각 버튼을 클릭 할 때 다른 동작을 수행하고 싶습니다.

가능한 경우 도움을 받으십시오. 나는 이것으로 고투하고있다. 표준 jQuery를 선택하는 것만으로는 효과가없는 것 같습니다.

고마워, 마이클.

Answer 1

당신은 jQuery를 on와 이벤트 위임을 사용하여 클릭 핸들러를 바인딩을 시도 할 수 있습니다 :

선택기가 제공

는 이벤트 핸들러 위임 라고합니다. 이벤트가 바운딩 요소 에서 직접 발생하지만 이 선택 자와 일치하는 하위 항목 (내부 요소)에 대해서만 처리기가 호출되면 처리기가 호출되지 않습니다. jQuery는 이벤트 대상에서 까지 이벤트를 처리기가 연결된 요소 (즉 가장 바깥 쪽 요소 인 의 가장 안쪽)에 연결하고 셀렉터와 일치하는 경로에있는 경로를 따라 처리기를 실행합니다.

코드 :

$('.open-popup-link').magnificPopup({ 
    items: { 
     type: 'inline', 
     src: $('<div class="white-popup">\ 
        <h4>Are you sure you were discharged for failing a drugs test?</h4>\ 
        <p>You will not be able to change your answer once you have submitted these details.</p>\ 
        <button id="test-popup-no">No, I\'ve made a mistake</button>\ 
        <button id="test-popup-yes">Yes, I\'m sure</button>\ 
        </div>') 
    }, 
    type: 'inline', 
    midClick: true 
}); 

$('body').on('click','#test-popup-no', function(){ 
    alert('Nope!');  
}) 

$('body').on('click','#test-popup-yes', function(){ 
    alert('Yes');  
}) 

데모 : @Irvin에 의해 게시 http://jsfiddle.net/IrvinDominin/A9dQ7/

Answer 2

코드가 유효하지만, 응용 프로그램 성능면에서 매우 좋지 않다. 클릭 이벤트를 바인딩/바인딩 해제하기 위해 열기/닫기 콜백을 사용하는 것이 좋습니다 (예 :

).

$('.open-popup-link').magnificPopup({ 
    items: { 
     type: 'inline', 
     src: $('<div class="white-popup">\ 
        <h4>Are you sure you were discharged for failing a drugs test?</h4>\ 
        <p>You will not be able to change your answer once you have submitted these details.</p>\ 
        <button id="test-popup-no">No, I\'ve made a mistake</button>\ 
        <button id="test-popup-yes">Yes, I\'m sure</button>\ 
        </div>') 
    }, 
    type: 'inline', 
    midClick: true, 
    callbacks: { 
     open: function() { 
      this.content.on('click.mycustomevent', '#test-popup-no', function() { 
       alert('hello world'); 
      }); 
     }, 
     close: function() { 
      this.content.off('click.mycustomevent'); 
     } 
    } 
});