생성된 요소에 대한 동적 날짜 선택기를 구현하는 방법

생성된 요소에 대한 동적 날짜 선택기 구현

문제:

동적으로 생성된 텍스트 상자에 날짜 선택기를 연결하려고 합니다. . 그러나

$(".datepicker_recurring_start" ).datepicker();

코드를 사용하면 모든 텍스트 상자가 "datepicker_recurring_start" 클래스를 공유함에도 불구하고 첫 번째 텍스트 상자에 대해서만 날짜 선택기가 활성화됩니다.

해결책:

이 제한을 극복하려면 다음 코드를 사용하세요.

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

설명:

이 코드는 위임된 이벤트 처리를 활용합니다. 이를 통해 이벤트 리스너는 다음을 수행할 수 있습니다. 상위 요소에 연결되고 특정 선택기와 일치하는 하위 항목에 적용됩니다. 이 경우:

• 'body'는 이벤트 리스너가 연결된 상위 요소입니다.
• 'focus'는 ' ".datepicker_recurring_start" 클래스가 있는 body'가 포커스를 받습니다.
• 콜백 함수 내에서 $(this).datepicker(); 초점이 맞춰진 요소(datepicker_recurring_start)에서 날짜 선택기 기능을 활성화합니다.

동적 이벤트 바인딩을 사용하면 언제든지 ".datepicker_recurring_start" 클래스를 사용하여 동적으로 생성된 모든 요소에 날짜 선택기가 연결되도록 할 수 있습니다. 포커스 이벤트가 발생합니다.

위 내용은 생성된 요소에 대한 동적 날짜 선택기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!