[Jquery] 동적생성 이벤트 관련하여 올바른 ON메소드 사용방법

일반적으로 제이쿼리에서 동적으로 생성되는 요소에 이벤트를 주기위해선

ON 이라는 메소드를 사용해서 줘야합니다.

근데 ON 메소드도 어떻게 주는냐에 따라서 동적요소에 이벤트가 작동할수도 안할수도 있습니다.

우선 잘못된 방법입니다.

[잘못된 ON 메소드 사용방법]

$('viewSl > li > img').on("mouseenter",function(){

var this_img = $(this).attr('src');

console.log(this_img)

});

이렇게 document가 아닌 해당요소를 직접선택을 하여 on메소드를 사용하면 

동적으로 요소가 생성됬을때 ON 이벤트를 사용했음에도 불구하고

동적인 요소에서 이벤트가 전혀 동작을 하지 않습니다. 

반드시 ON이벤트를 사용할때는 document 를 사용하여 ON 메소드 안에서 요소를 지정을 해줘야 정상적으로 작동을 합니다.

위에 잘못된 방식을 아래의 방식으로 작성을하면 동적으로 생성된 요소들도

정상적으로 작동을 합니다^^

[올바른 ON 메소드 사용방법]

$(document).on("mouseenter","viewSl > li > img",function(){

var this_img = $(this).attr('src');

console.log(this_img)

});

어떻게 보면 기초적인부분이지만 해당 부분을 모르면 한참 동안 고생할수 있습니다.