[jQuery]아직 존재하지 않는 요소 이벤트 등록(라이브 방식)

라이브 방식 이벤트 등록

라이브 방식으로 이벤트를 등록하면 아직 존재 하지 않는 요소에 이벤트를 등록할 수 있다.

 

만약 click 이벤트를 사용하면 요소가 동적으로 추가 또는 삭제 될 경우 이벤트도 같이 등록 또는 제거를 해줘야 하기 때문에 번거롭다.

이럴때 사용할 수 있는 기능이 라이브 이벤트 등록이다.

 

$대상.on("이벤트명","대상자식노드", 이벤트리스너(){
})

위의 구문을 실행하면 $대상의 자식노드중에서 대상자식노드에만 이벤트를 등록한다는 뜻이된다.

 

var $member=null;
var $memberName=null;
var $clickItem=null;
$(document).ready(function(){
    init();
    initEvent();
})

function init(){
    $member=$(".member");
    $memberName=$("#memberName");
}

function initEvent(){
    $("#add").click(function(){
        add();
    })
    $member.on("click","li",function(){ //라이브 방식 이벤트 등록
        addClass($(this));
    })
}

function addClass($item){
    if($clickItem!=null){
        $clickItem.removeClass("on");
    }
    $clickItem=$item;
    $clickItem.addClass("on");
}


function add(){
    memberName = $memberName.val();
    $member.append(`<li>${memberName}</li>`);
}

 

위의 예시에서 아래 코드가 라이브 방식 이벤트 등록 하는 방법 이다.

$member.on("click","li",function(){ //라이브 방식 이벤트 등록
    addClass($(this));
})

$member의 자식 노드 중에서 li에만 click이벤트를 등록

click 할경우 함수 안에 내용 실행