> 웹 프론트엔드 > JS 튜토리얼 > jQuery 또는 jQuery UI를 사용하여 동적으로 생성된 입력 필드에서 날짜 선택기를 활성화하는 방법은 무엇입니까?

jQuery 또는 jQuery UI를 사용하여 동적으로 생성된 입력 필드에서 날짜 선택기를 활성화하는 방법은 무엇입니까?

Linda Hamilton
풀어 주다: 2024-10-20 20:43:02
원래의
310명이 탐색했습니다.

How to Enable Datepickers on Dynamically Created Input Fields Using jQuery or jQuery UI?

동적으로 생성된 요소에 Datepickers 연결 - JQuery/JQueryUI

문제 설명:

An 다음 코드를 사용하여 텍스트 상자를 동적으로 생성하고 클릭 시 각각에 대해 날짜 선택기를 활성화하려고 시도하면 첫 번째 텍스트 상자만 날짜 선택기를 수신하게 됩니다.

$(".datepicker_recurring_start" ).datepicker();
로그인 후 복사

해결책:

동적으로 생성된 모든 요소에서 날짜 선택기를 활성화하려면 코드에서 아래와 같이 jQuery의 on() 메서드를 사용하여 이벤트 위임을 사용해야 합니다.

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​
로그인 후 복사

설명:

on() 메서드는 동적으로 생성된 모든 텍스트 상자의 상위 요소인 body 요소에 이벤트 리스너를 추가합니다. datepicker_recurring_start 클래스에 포커스가 있는 경우(예: 사용자가 해당 클래스가 있는 입력 필드를 클릭하는 경우) datepicker() 메서드가 포커스가 있는 요소에 적용됩니다.

이 접근 방식은 이벤트 첨부를 허용하는 이벤트 위임을 사용합니다. DOM에서 동적으로 추가되거나 제거되는 요소에 대한 리스너입니다. 이 경우 body 요소는 이벤트 리스너 대상으로 사용되고 datepicker_recurring_start 클래스 선택기는 포커스가 있을 때 datepicker를 트리거해야 하는 특정 요소를 식별하는 데 사용됩니다.

위 내용은 jQuery 또는 jQuery UI를 사용하여 동적으로 생성된 입력 필드에서 날짜 선택기를 활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿