몽상가
121
2019-08-12 21:32:07
4
788

무한 스크롤 게시판 리스트에서 동적으로 생성된 태그 css, js파일 적용하는 법


선배님들 안녕하세요.

포트폴리오 작업하는 중 게시판을 페이징처리하는 부분에서 이번에는 다르게 페이지 넘버를 클릭하지않고, 스크롤이 끝에 닿으면 동적으로 아래에 그 다음 리스트를 뿌리는 식으로 만들어보고 싶었습니다. 그런데 동적으로 생성된 태그가 css파일과 js파일의 설정이 먹지 않아 한참 고생중입니다.


현재 진행된 부분은 스크롤이 하단에 닿으면 Ajax를 이용해 컨트롤러단에서 게시글 정보가 담긴 객체 10개를 담은 리스트를 받아옵니다. 여기 까진 확인이 되었는데 뷰로 뿌려주는 과정에서 자바스크립트를 통해 동적으로 태그를 뿌려주는데서 문제가 되고있습니다.


문제가 되는 부분의 코드입니다. 넘모 어렵습니다아 ㅜㅜ 도와주시면 감사하겠습니다.

$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
var root = $('#root').val();
var getListLink = $('#getListLink').val();
$.ajax({
type : 'post',
url : root + '/ajax',
data : getListLink,
dataType : 'json',
success : function(list) {
list.forEach(function(item) {
var str = '<tr class="tr_main">'
+' <td class="td_thumb" rowspan="2"><img src=' + root + '"/css/images/board_picture.png"></td>'
+' <td class="td_subject" colspan="2">'
+' <a href="read?bno=\'"' + item.bno + '"&"' + getListLink + '">' + item.subject + '</a><br>'
+' </td>'
+' <td class="td_vote" rowspan="2" data-case="' + item.voteCase + '" title="' + (item.up_count/item.down_count) + '">' + (item.up_count-item.down_count) + '</td>'
+'</tr>'
+'<tr class="tr_sub">'
+' <td class="td_date" title="' + item.reg_date + '">'
+ item.getTypeChangeDate()
+' </td>'
+' <td class="td_writer">' + item.writer + '</td>'
+'</tr>';
$('.td_sub:last').append(str);
});
}
});
}
});


0
  • 답변 4

  • 몽상가
    121
    2019-08-12 21:37:09

    $('head').append('<link rel="stylesheet" href="css경로" type="text/css" />');

    이 코드를 넣으니 작동은 되는데 옳은 방법 같지는 않습니다.... 이거 문제없나요? 같은 경로의 css가 계속 추가되는 꼴인거 같습니다.

  • 몽상가
    121
    2019-08-12 21:45:06
    $(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
    var root = $('#root').val();
    var getListLink = $('#getListLink').val();
    $.ajax({
    type : 'post',
    url : root + '/ajax',
    data : getListLink,
    dataType : 'json',
    success : function(list) {
    list.forEach(function(item) {
    var str = '<tr class="tr_main">'
    +' <td class="td_thumb" rowspan="2"><img src=' + root + '"/css/images/board_picture.png"></td>'
    +' <td class="td_subject" colspan="2">'
    +' <a href="read?bno=\'"' + item.bno + '"&"' + getListLink + '">' + item.subject + '</a><br>'
    +' </td>'
    +' <td class="td_vote" rowspan="2" data-case="' + item.voteCase + '" title="' + (item.up_count/item.down_count) + '">' + (item.up_count-item.down_count) + '</td>'
    +'</tr>'
    +'<tr class="tr_sub">'
    +' <td class="td_date" title="' + item.reg_date + '">'
    + item.reg_date
    +' </td>'
    +' <td class="td_writer">' + item.writer + '</td>'
    +'</tr>';
    $('.board_table:last').append(str);
    $('link#list_css').remove();
    $('script#list_js').remove();
    $('head script:last').append('<link id="list_css" rel="stylesheet" href="css파일 경로" type="text/css" />');
    $('head script:last').append('<script id="list_js" src="js파일 경로"></script>');
    });
    }
    });
    }
    });

    현재 잘 작동하는 것 같은 코드인데 이렇게 써도 되는건가요? 질문하는 도중에 갑자기 시도해봤는데 돌아는가네요..;;;

  • ggugers
    2019-08-12 22:21:55
    css 문제가 아니라 자바스크립트 문제 같네요.
    js파일안에 디자인 적용하는 함수가 있을거 같네요.
  • 몽상가
    121
    2019-08-13 08:05:09

    ggugers

    자바스크립트 부분에도 수정을 할 부분이 꽤나 있었더군요. 코드 디테일은 조금더 손을 봐야겠지만 얼추 작동은 하게됐어요 ㅋㅋㅋ 감사합니다.

  • 로그인을 하시면 답변을 등록할 수 있습니다.