Magnificent Popup에서 동적으로 추가 된 요소를 찾지 못했습니다. 아약스 갤러리에서 현재 항목을 클릭하면 다음 항목으로 이동하려고합니다

Question

전체 크기 이미지가 라이트 박스로 표시되는 이미지 갤러리를 만들고 있습니다. 라이트 박스의 내용은 외부 파일의 아약스로드 HTML입니다. 이 동작을 위해 Magnific Popup 스크립트를 사용하고 있습니다. 라이트 박스에 표시된 현재 이미지의 아무 곳이나 직접 클릭하여 다음 갤러리 이미지로 이동할 수 있도록하려고합니다. 문제는 DOM에 명확하게 삽입되었지만 클릭 이벤트를 감지 할 수 없었기 때문입니다.

홈페이지보기 :main.html

<div class="gallery"> 
    <a href="gallery.php?photo=image-1.jpg">thumb-1.jpg</a> 
    <a href="gallery.php?photo=image-2.jpg">thumb-2.jpg</a> 
    <a href="gallery.php?photo=image-3.jpg">thumb-3.jpg</a> 
</div> 

라이트 박스 내용 :gallery.php

<?php echo '<img class="item" src="img/' . $_GET['photo'] . '" >'; ?> 

jQuery를 :

$('.gallery').each(function() { 
    $(this).magnificPopup({ 
     delegate: 'a', 
     type: 'ajax', 
     gallery: { 
      enabled: true, 
      navigateByImgClick: true 
     } 
    }); 
}); 

문서에 navigateByImgClick 옵션이 표시되지 않지만 현재 갤러리 항목을 클릭하면 다음 갤러리 항목으로 이동하게됩니다. 그러나, 적어도 내 테스트에서, 이것은 ajax 갤러리 (type이 ajax으로 설정된 경우)에서 작동하지 않는 것 같습니다. 그래서 나는 조각을 추가했던 것은 클릭 이벤트가 감지되고 있는지 확인합니다 :

$('.item').on('click', function() { 
    alert('click detected'); 
}); 

.item 갤러리 항목의 선택이다. 그러나 클릭이 감지되지 않습니다 (클릭시 경고가 표시되지 않음).

먼저 클릭이 감지되지 않는 이유는 무엇입니까?

둘째, 아약스 갤러리를 사용할 때 Magnific Popup을 설정하여 다음 갤러리 항목을로드하는 방법은 무엇입니까?

Answer 1

알아 냈어. 이미지에 .mfp-img 클래스를 할당해야합니다. 이제 작동합니다. 이것은 멋진 팝업 소스의이 부분에서 발견 할 수 있습니다.

if(gSt.navigateByImgClick) { 
    mfp.wrap.on('click'+ns, '.mfp-img', function() { 
     if(mfp.items.length > 1) { 
      mfp.next(); 
      return false; 
     } 
    }); 
}