동적 생성 element 이벤트 바인딩 .on()

DB에서 받아온 데이터를 이용하여 <li> 나, <input> 등의 태그를 동적으로 추가할 경우,

$("#fsch_lst li").click(function(){ 
    alert($(this).attr("id"));
});

이와같은 일반적인 이벤트가 동작되지 않는다.

기존에 작성된 <li> 태그에는 click 이벤트가 적용 되지만,

for문이나 ajax로 추가되는 <li>element에는 click 이벤트가 적용되지 않는다.

아래 소스코드로 바꾸어 실행해야한다.

$("#fsch_lst").on("click","li", function(e){ 
    alert($(this).attr("id"));
});

document 선택자 사용가능.

$(document).on("change", "#fsch_lst_input",function(){
    alert('change');
});

*** 단 document 선택자를 사용할 경우 이와 같은 조건문이 제대로 동작하지 않는다.

a 태그에 class 적용 안됨.

(지속적으로 document 를 읽어오기 때문에 if문 한번으로 끝나지 않고, else문에 걸려 class를 원상복구 시켜놓기 때문)

$("#make_lst").on("click", "a",function(){
 
    if($(this).attr('class') !== "activation") $(this).attr('class', "activation");
    else $(this).attr('class', "no"); 
});

** on("click 이나 change 같은 이벤트", "이벤트 적용 선택자 또는 태그", 동작 함수) 

.on( events [, selector] [, data], handler( eventObject ) )

• events: 공백으로 구분된 하나 이상의 이벤트 타입과 옵션인 네임스페이스. "click", "keydown.myPlugin", ".myPlugin" 등이 있음
• selector: 이벤트가 발생할 요소들의 자손을 찾는 선택자. 선택자가 null 이거나 생략됐다면 이벤트는 선택된 요소에 한해서 반응한다.
• data: 이벤트가 발생할 때 핸들러에 전달할 데이터
• handler(eventObject): 이벤트가 발생되면 실행될 기능. false를 반환하는 함수라면 간단하게 false 를 직접 인자로 하면 된다.

.on( events-map [, selector] [, data] )

• events-map: 공백으로 구분된 하나 이상의 이벤트 타입과 선택적인 네임스페이스로 구성된 키(keys)들과 값(values)들의 문자열.

참고 : https://hclee2575.tistory.com/342