테스트 사이트 - 개발 중인 베타 버전입니다

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

qoqofh 4년 전 조회 2,168

 

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개

채택된 답변
+20 포인트
4년 전

$(".popyt").click(function() { });

로 하시면 추가적으로 생성된 요소들에게는 적용되지 않습니다

$(document).on('click', '.popyt').function(){

});

로 하시거나, 아니면 추가적으로 생성될때마다 해당 요소들의 클릭 이벤트를 추가적으로 넣어주세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

q
qoqofh
4년 전
아네 참고하여서 적용은 되었는데 1개만 뜨는 이유가 가장 큰 문제네요 ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

ajax에서 콜백되서 들어오는 html코드를 전부 찍어보세요

 

split되는 시점이 두번째

에서 잘리게 되어있는데

 

원하는 시점이 아닐거에요

 

기존 소스를 참고해서 사용하느라 코드 수정이 더 필요할텐데 

 

html 스플릿 시점부터 찾아보시는게 좋아보이네요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

q
qoqofh
4년 전
아 그러면 div를 간단하게 figure로 바꿔서 하면 되는거같은데... 맞는지를 모르겠네요 ...ㅋㅋ
병원에서일해요
4년 전
네 최상위 div를 고유한태그로 바꿔주면 좀 더 구분하기 쉽겠네요

기존에 테이블형태에서 tbody같이 하나만 존재하는 태그로 바꾸면 더 쉬울거에요
q
qoqofh
4년 전
정말감사합니다 ^^

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인