동적으로 생긴 요소 이벤트. $(document).on

 

 

$(document).on('click', '.bt-regist', function() { ... })과 $('.bt-regist').on('click', function() { ... })는 이벤트를 바인딩하는 두 가지 다른 방법입니다. 각각의 차이점을 살펴보겠습니다.

1. $(document).on('click', '.bt-regist', function() { ... })   : 이 코드는 이벤트 위임을 사용하는 방법입니다. 여기서 $(document)는 이벤트를 캐치할 부모 요소를 나타내며, .bt-regist는 동적으로 추가된 버튼의 클래스를 나타냅니다. 이 코드는 동적으로 추가된 요소에 대한 이벤트를 캐치하여 처리할 수 있습니다.이벤트 위임을 사용하면 동적으로 추가된 요소에 대해서도 이벤트를 적용할 수 있습니다.
2.  
3. $('.bt-regist').on('click', function() { ... })   : 이 코드는 직접적으로 요소에 이벤트를 바인딩하는 방법입니다. 이는 문서가 초기에 로드될 때 존재하는 요소에 대해서만 이벤트를 바인딩합니다. 따라서 이벤트가 동적으로 추가된 요소에는 적용되지 않습니다. 이벤트 바인딩이 발생한 시점에만 존재하는 요소에 대해서만 이벤트가 작동합니다.

따라서 동적으로 추가되는 요소에 대해서는 이벤트 위임을 사용하는 것이 좋습니다. 이렇게 하면 동적으로 추가된 요소에 대해서도 이벤트를 적용할 수 있습니다.