[JQuery] popover 동적생성

이번 포스팅은 popover를 동적으로 생성할 때 겪은 문제에 대해서 포스팅 하려고 왔습니다.

우선 제가 지금 하고 있는 작업은 구글캘린더를 따라하는(?) 일입니다....

#구글 개발팀들 존경합니다... 저도 나중에 그런 개발자가 되고 싶어요 ㅎㅎ.......

위에서 보이는 모습이 제가 만들고 있는 짝퉁 구글캘린더인데요 ㅎㅎ....

#하..... 저의 머리로 하려다보니 간신히 하기는 했는데... 울고 싶었습니다... 드디어 캘린더의 늪에서 빠져나온거 같아요..

아무튼 저 위에서 보이는 더보기 버튼은 popover 인데!!! 

전에 백단이랑 연결해놓지 않았을때는 잘 작동하다가 캘린더를 그리고 나서는 작동을 안하는 겁니다...

$('.more-schedule').popover({
    html: true,
    content: function() {
        $("#more-schedule-date").html(this['attributes']['data-date']['value']);
        return $('#more-schedule-list-wrap').html();
    }
});

$('document').on('click','.more-schedule', function (e) {
    $('.more-schedule').not(this).popover('hide');
});

$(document).click(function(e) {
    var target = e.target;

    if (!$(target).is('.more-schedule') && !$(target).parents().is('.more-schedule')) {
        $('.more-schedule').not(this).popover('hide');
    }
});

이게 정적일 때 사용하던 소스코드인데요! 그냥 작동안하는구나... 이러고 있다가

구글갓님께 여쭤보니!! 몇가지의 정답을 가르쳐 주셨습니다!!!

1. trigger: 'hover'popover 객체에 추가해라!!!!

 ==> 아쉽게도 저에게는 해결책을 주지 못했던 방법입니다... 일단 한번 해보는건 나쁘지 않을 것 같아요!

2. 콘텐트가 동적으로 생성 된 경우 DOM에 삽입 될 때 Popover를 직접 초기화해야합니다.!!!!!!

==> 제 해결책이었습니다!!!

/* pop over 관련 */
$(document).ready(function() {

    $(document).click(function(e) {
        var target = e.target;
        if (!$(target).is('.law-firm-more-icon') && !$(target).parents().is('.law-firm-more-icon')) {
            $(".law-firm-more-icon").css({"display":"none"});
            $('.law-firm-more-icon').not(this).popover('hide');
        }
    });

    //popover는 동적으로 생성시에 직접 초기화 해주어야 함
    $(document).on('click', '.more-schedule', function() {
        var $this = $(this);
        //if not already initialized
        if (!$this.data('bs.popover')) {

            //그날 더보기 가져오기



            $this.popover({
                html: true,
                content: function() {
                    $("#more-schedule-date").html(this['attributes']['data-date']['value']);
                    return $('#more-schedule-list-wrap').html();
                }
            }).popover('show');
        }
        $('.more-schedule').not(this).popover('hide');
    });


});
/* pop over 관련 끝*/

뾱!! 이렇게 더보기가 잘 된답니다 ㅎㅎㅎㅎ

별 큰 에러는 아니였지만 기억해두면 좋을 것 같아서 포스팅합니다!!

그럼 안녕히계세요.