유튜브 플로터 팝업 게시판 무한 스크롤로 응용시 문제 채택완료

https://sir.kr/g5_skin/40277?sfl=wr_subject%7C%7Cwr_content&stx=%ED%94%8C%EB%A1%9C%ED%84%B0
이 게시판 스킨을 활용하여 유튜브 플로터형태의 게시판을 사용중 입니다.
위 사진은 현재 게시판 이미지 이며, 스크롤을 진행하여 다음 2페이지의 리스트를 불러오면 아래와 같이 나옵니다.(게시글 수는 총 9개인데, 3개가 떠야하는데 1개만 뜨고, 심지어 1개가 뜬 리스트를 클릭하면 팝업플로터가 되지 않습니다 ㅠ)

기존 스킨에서 좀 응용을 하여 무한스크롤리스트로 구현을진행하고 있는데, 뭐가 문제인지 잘되지 않네요 ㅠㅠ
스크립트는 이렇습니다.
</p>
<p><script></p>
<p> var total_page = "<?=$total_page?>";
var now_page = "<?=$page?>";
var roll_page = now_page;
$(window).ready(function(){
console.log(roll_page);</p>
<p> if(roll_page != total_page){
$(".btmScroll").show();
}
});</p>
<p> $(window).scroll(function(){
var chkBtm = parseInt($(document).height()) - parseInt($(window).height());
if(chkBtm == $(window).scrollTop()){
roll_page++;
if(roll_page <= total_page){
callContent(roll_page,'append');
}
}
});</p>
<p> function callContent(a,b){</p>
<p> if(b=='append'){
$(".moreBtm").slideDown();
}
var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
var tbody = "";
var thtml = "";
$.ajax({
type:"GET",
url:url,
dataType : "html",
success: function(html){
tbody = html.split("<div class='portfolio__grid hover--one three--columns tbl_head01 tbl_wrap'>");
thtml = tbody[1].split("</div>");
setTimeout(function() {
if(b=='append'){
$("div.portfolio__grid").append(thtml[0]);
}
$(".moreBar").slideUp();</p>
<p>
if(roll_page == total_page){
$(".btmScroll").slideUp();
}
}, 1000);
},
error: function(xhr, status, error) {
alert(error);
}
});
}</p>
<p></script></p>
<p>
팝업스크립트는 이렇습니다.
</p>
<p><script>
$(".popyt").click(function() {
var _bo = '<?php echo $bo_table ?>';
var _id = $(this).data('wr_id');
$.ajax({
url: '<?php echo $board_skin_url ?>/ajax_hit.php',
type: 'POST',
data: {bo_table : _bo, wr_id : _id},
success: function(data) {
//alert(data);
}
});
$(".video-popup").addClass("reveal"),
$(".video-popup .video-wrapper").remove(),
$(".video-popup").append("<div class='video-wrapper'><div class='video-wrapper_div2'><div class='video-wrapper_div'><iframe width='1000' height='563' src='<a href="https://youtube.com/embed/"" target="_blank" rel="noopener noreferrer">https://youtube.com/embed/"</a> + $(this).data("video") + "?rel=0&playsinline=1&autoplay=0' allow='accelerometer; gyroscope; picture-in-picture; encrypted-media' allowfullscreen style=''></iframe><div class='tit_box_con'>" + $(this).find("div.share_btn").html() + "<span class='ca_name_but'>분류 : </span><span class='ca_name_tit'>" + $(this).find("span").html() + "</span><span class='select_tit'>" + $(this).find("h5.select_view").html() + "</span><span class='subject_tit'>" + $(this).find("h4").html() + "</span><div class='right_box'>" + $(this).find("div.bo_info_in_right").html() + "<div class='con_download'><a href='" + $(this).find("p.href_lik").html() + "'>자세히 보기</a></div></div><span class='wr_content_txt'>" + $(this).find("p").html() + "</span>" + $(this).find('.wr_link').html() + "</div></div></div></div>");
});
function copy_to_clipboard(idx) {
var copyText = document.getElementById('myInput_' + idx);
copyText.select();
copyText.setSelectionRange(0, 99999);
document.execCommand("Copy");
alert('링크가 복사되었습니다.');
}</p>
<p> </script></p>
<p>
무엇이 문제일까요 ㅠㅠ?
답변 2개
$(".popyt").click(function() { });
로 하시면 추가적으로 생성된 요소들에게는 적용되지 않습니다
$(document).on('click', '.popyt').function(){
});
로 하시거나, 아니면 추가적으로 생성될때마다 해당 요소들의 클릭 이벤트를 추가적으로 넣어주세요.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
ajax에서 콜백되서 들어오는 html코드를 전부 찍어보세요
split되는 시점이 두번째
원하는 시점이 아닐거에요
기존 소스를 참고해서 사용하느라 코드 수정이 더 필요할텐데
html 스플릿 시점부터 찾아보시는게 좋아보이네요
답변에 대한 댓글 3개
기존에 테이블형태에서 tbody같이 하나만 존재하는 태그로 바꾸면 더 쉬울거에요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인