간혹 화면을 동적으로 구성하는 경우가 있습니다.
$(this).parent().next().html(conditionName);
위와 같이 특정 요소에 html로 밀어넣는다거나 하여, element를 끼워넣는 경우들이죠.
그런데 저 끼워넣은 요소들은 페이지가 로드될 때 선언한 바인딩이 동작 안합니다.
예를 들어 아래와 같은..
$(".tab-tit").on("click", function(){
alert("이건 안먹어요.");
});
위와 같은 선언이 있어도, 끼워넣은 요소는 백날 클릭해도 안 탑니다.
그럼 어떻게 해야하느냐?
아래와 같이 이벤트 바인딩은 document 등 상위에 걸고, 인자로 필터를 걸면 됩니다.
$(document).on("change", ".tab-tit", function(){
alert("이건 먹습니다.");
});
동적 요소에 이벤트가 안먹힐 때 위와 같이 해보세요.