쇼핑몰을 만들면서 다음과 같이 슬라이딩되는 메뉴를 제작할 일이 생겼습니다.


(다음 예제는 쇼핑몰에서 해당 부분만 따로 빼서 따로 ftp에 업로드한 것입니다.)


http://zoahaza.dothome.co.kr/blogupload/p150726_bimilbottari_spanarrow_oldjquery.html




처음에는 이 것을 구현하고 나니, 방향이 거꾸로 동작하거나 누를 때 아예 멈추기도 하는 등...


문제가 발생했습니다. 처음에는 .mouseenter 메소드와 .click 메소드가 충돌하는 것이라 생각했지만, 그게 아니었습니다.


click 메소드 내에 console.log를 찍어 보니, 이 console.log가 처음에는 1번씩 찍히다가 누를 때마다 횟수가 증가하여 2번, 3번, 심지어는 5~10번까지 찍히는 것이었습니다.


그런데 현재의 li는 3개 뿐이므로, 한번 클릭에 2번 실행되면 전체 슬라이드가 반대쪽으로 움직이며, 3번 실행되면 전체 슬라이드가 아예 반응을 안하는 것처럼 보이는 것이었습니다.


이 것을 방지하려면 다음과 같은 소스코드가 필요합니다.


$(document).ready(function(){

temp_bannerarrowindicationtext();

});


function temp_bannerarrowindicationtext(){

    var bannerswap001_r_val = 500;

    var $bannerswap001_r_interval1 = "NULL";

    var bannerswap001_r_index = 0;

    var bannerswap001_r_index_length = $(".banner_wrap .wbannermove li").size();

    

    $(".banner_wrap").mouseenter(function(){

        clearInterval($bannerswap001_r_interval1);   

        $(this).find(".wbannerarrow").mouseenter(function(){

            $(this).find(".wtext").text(bannerswap001_r_index+1 + "/" + bannerswap001_r_index_length);

            $(this).find(".wtext").show();

        });

        $(this).find(".wbannerarrow").mouseleave(function(){

            $(".banner_wrap .wbannerarrow .wtext").hide();

        });

        

        $(this).find(".wbannerarrow.left").die('click').live('click',function(){

            //console.log(1);

            bannerswap001_r_index--;

            if(bannerswap001_r_index<0){

                bannerswap001_r_index=2;

            }

            loop_function_bannerswap001();

            $(this).find(".wtext").text(bannerswap001_r_index+1 + "/" + bannerswap001_r_index_length);

        });

        $(this).find(".wbannerarrow.right").die('click').live('click',function(){

            //console.log(2);

            bannerswap001_r_index++;

            if(bannerswap001_r_index>=3){

                bannerswap001_r_index=0;

            }

            loop_function_bannerswap001();

            $(this).find(".wtext").text(bannerswap001_r_index+1 + "/" + bannerswap001_r_index_length);

        });


        loop_function_bannerswap001();

    });

    

    $(".banner_wrap").mouseleave(function(){

        loop_interval_bannerswap001();

    });

    

    function loop_interval_bannerswap001(){

        $bannerswap001_r_interval1 = setInterval(function(){

            bannerswap001_r_index++;

            if(bannerswap001_r_index>=3){

                bannerswap001_r_index=0;

            }

            loop_function_bannerswap001();

            


        }, 3500);

    };

    

    function loop_function_bannerswap001(){

        $(".banner_wrap .wbannermove").stop().animate({

            left : -1 * bannerswap001_r_index * bannerswap001_r_val

        },800);

        

    };

    

    loop_interval_bannerswap001();

    

};


핵심은 이 부분입니다.


$(this).find(".wbannerarrow.left").die('click').live('click',function(){


하지만... 이 방법의 문제점이라고 한다면, 최신 jQuery에서는 동작하지 않습니다.


카페24가 구버전 jQuery를 기본으로 내장하고 있어서 동작하는 것입니다.


http://zoahaza.dothome.co.kr/blogupload/p150726_bimilbottari_spanarrow_newjquery.html








신버전에서는 이 방법을 써야 합니다.


http://zoahaza.dothome.co.kr/blogupload/p150726_bimilbottari_spanarrow_newjquery_ed001.html


$(document).ready(function(){

temp_bannerarrowindicationtext();

});


function temp_bannerarrowindicationtext(){

    var bannerswap001_r_val = 500;

    var $bannerswap001_r_interval1 = "NULL";

    var bannerswap001_r_index = 0;

    var bannerswap001_r_index_length = $(".banner_wrap .wbannermove li").size();

    

    $(".banner_wrap").mouseenter(function(){

        clearInterval($bannerswap001_r_interval1);   

        $(this).find(".wbannerarrow").mouseenter(function(){

            $(this).find(".wtext").text(bannerswap001_r_index+1 + "/" + bannerswap001_r_index_length);

            $(this).find(".wtext").show();

        });

        $(this).find(".wbannerarrow").mouseleave(function(){

            $(".banner_wrap .wbannerarrow .wtext").hide();

        });

        

        $(this).find(".wbannerarrow.left").unbind().bind("click", function(){

        //console.log(1);

            bannerswap001_r_index--;

            if(bannerswap001_r_index<0){

                bannerswap001_r_index=2;

            }

            loop_function_bannerswap001();

            $(this).find(".wtext").text(bannerswap001_r_index+1 + "/" + bannerswap001_r_index_length);

        });

        $(this).find(".wbannerarrow.right").unbind().bind("click", function(){

        //console.log(2);

            bannerswap001_r_index++;

            if(bannerswap001_r_index>=3){

                bannerswap001_r_index=0;

            }

            loop_function_bannerswap001();

            $(this).find(".wtext").text(bannerswap001_r_index+1 + "/" + bannerswap001_r_index_length);

            

            /*

            rightclicknum++;

            if(rightclicknum >= 2){

            $(this).unbind();

            rightclicknum=0;

            }

            */

        });


        loop_function_bannerswap001();

    });

    

    $(".banner_wrap").mouseleave(function(){

        loop_interval_bannerswap001();

    });

    

    function loop_interval_bannerswap001(){

        $bannerswap001_r_interval1 = setInterval(function(){

            bannerswap001_r_index++;

            if(bannerswap001_r_index>=3){

                bannerswap001_r_index=0;

            }

            loop_function_bannerswap001();

            


        }, 3500);

    };

    

    function loop_function_bannerswap001(){

        $(".banner_wrap .wbannermove").stop().animate({

            left : -1 * bannerswap001_r_index * bannerswap001_r_val

        },800);

        

    };

    

    loop_interval_bannerswap001();

    

};


핵심은 이 부분입니다.


$(this).find(".wbannerarrow.left").unbind().bind("click", function(){


그러니까 die, live대신 unbind, bind를 쓴다는 것이 핵심입니다.




포털에서는 이와 관련된 정보를 한글로 검색해 보니 die, live 방법은 쉽게 검색이 되지만 unbind, bind와 관련된 정보는 검색이 잘 안되더군요. 아무래도 영어로 검색해야 이 부분이 검색이 될 것 같습니다. 이제 제가 이와 관련된 글을 올렸으니 관련된 정보가 검색되기 시작하겠군요. 물론 티스토리 검색을 제대로 못하게 막는 네이버는 예외입니다.




저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 귀여운걸 2015.08.23 16:47 신고  댓글주소  수정/삭제  댓글쓰기

    아하~ 차근차근 쉽게 설명해주시니 귀에 쏙쏙 들어오네요~
    덕분에 잘 배워갑니다^^

티스토리 툴바