유튜브 플로터 팝업 게시판 무한 스크롤로 응용시 문제
본문
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개가 뜬 리스트를 클릭하면 팝업플로터가 되지 않습니다 ㅠ)
기존 스킨에서 좀 응용을 하여 무한스크롤리스트로 구현을진행하고 있는데, 뭐가 문제인지 잘되지 않네요 ㅠㅠ
스크립트는 이렇습니다.
<script>
var total_page = "<?=$total_page?>";
var now_page = "<?=$page?>";
var roll_page = now_page;
$(window).ready(function(){
console.log(roll_page);
if(roll_page != total_page){
$(".btmScroll").show();
}
});
$(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');
}
}
});
function callContent(a,b){
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();
if(roll_page == total_page){
$(".btmScroll").slideUp();
}
}, 1000);
},
error: function(xhr, status, error) {
alert(error);
}
});
}
</script>
팝업스크립트는 이렇습니다.
<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='https://youtube.com/embed/" + $(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('링크가 복사되었습니다.');
}
</script>
무엇이 문제일까요 ㅠㅠ?
!-->!-->답변 2
$(".popyt").click(function() {
});
로 하시면 추가적으로 생성된 요소들에게는 적용되지 않습니다
$(document).on('click', '.popyt').function(){
});
로 하시거나, 아니면 추가적으로 생성될때마다 해당 요소들의 클릭 이벤트를 추가적으로 넣어주세요.
ajax에서 콜백되서 들어오는 html코드를 전부 찍어보세요
split되는 시점이 두번째 </div> 에서 잘리게 되어있는데
원하는 시점이 아닐거에요
기존 소스를 참고해서 사용하느라 코드 수정이 더 필요할텐데
html 스플릿 시점부터 찾아보시는게 좋아보이네요
답변을 작성하시기 전에 로그인 해주세요.