[이벤트 위임]_ul li 이벤트 위임.

사용 언어 : ES6 ,JQuery

 

목적]

li 의 class 명이 Open 혹은 Put 2가지의 ul li 리스트가 있습니다. 

그중 Open이 먼저 선택시 선택된 값 은 Put 리스트에서 선택할 수 없게 하는것이 목표입니다.

 

구조 : div -> ul -> li 의 구조]

 

화면]

 

문제 코드]

$("#tpOpenDtYmd, #tpPutDtYmd").on("change",function (e) {
    $(".Open").on("click", function () {

        if (!($(".Put").children(".selectedhour").text() == '')) {
            let text = $(".Put").children(".selectedhour").text();

            let hour = text.slice(0, 2);

            let element = '<li class="time_select_list Put" value=' + hour + '>' + text + '</li>'
            $('.Put[value=' + hour + ']').replaceWith(element);
        } else {

            let hour = '';
            hour = this.value;
            if (this.value < 10) {
                hour = "0" + this.value;
            }

            let element = '<li class="time_select_list Put" value=' + hour + '><span class="line-through selectedhour">' + hour + '시 (' + hour + ':00~' + hour + ':59)</span> <span class="txc_red">선택함</span></li>'
            $('.Put[value=' + hour + ']').replaceWith(element);

        }

    })
};

처음으로 작성한 코드입니다.

 

작동은 하였으나, 될때가 있고 안될때가 있는 불안정한 코드입니다.

 

원인은 이벤트가 중복으로 걸려서 (버블링)

element가 먼저 출력되면 작동하고 만약 느려져서 함수가 먼저 실행되면 안되는 문제를 가지고 있습니다.

 

해결 ]

 

ul 아래의 li에 이벤트를 다는 것이 아니라 ul에 이벤트를 걸면 이벤트 위임으로 인해 li에 전부 이벤트가 걸리게 됩니다.

 

$("#time-select-Open").on("click",function(e){

 

위의 코드를 이용해서 li 에 이벤트를 걸고

 

$("#time-select-Put li").children().hasClass("selectedhour"))

ul의 자식들인 li 이 가지고 있는 <span> 에서 selecthour 클래스가 있는지 판별합니다.

 

ul 아래의 li에 이벤트를 걸때는 하나하나 선별해서 거는 것이 아니라 부모 element 에 이벤트를 걸면 해결됩니다.

 

감사합니다.