jquery는 날짜를 동적으로 추가할 수 없습니다.-프런트엔드 Q&A-php.cn

jquery는 날짜를 동적으로 추가할 수 없습니다.

PHPz

풀어 주다： 2023-05-11 17:41:07

원래의

509명이 탐색했습니다.

최근 몇 년간 프론트엔드 기술의 지속적인 개발로 인해 jQuery는 웹 개발에서 가장 일반적으로 사용되는 JavaScript 라이브러리 중 하나가 되었습니다. 간단하고 사용하기 쉬운 다양한 인터페이스와 기능을 제공하여 JavaScript 코딩 작업을 크게 단순화합니다. 그러나 실제 적용에서는 필연적으로 몇 가지 어려움에 직면하게 됩니다. 이 문서에서는 날짜 선택기를 동적으로 추가하는 방법이라는 한 가지 문제에 중점을 둘 것입니다.

날짜 선택기는 웹 양식에서 일반적으로 사용되는 컨트롤 중 하나입니다. jQuery에는 사용할 수 있는 다양한 선택기 플러그인도 있습니다. 그러나 날짜 선택기를 동적으로 추가해야 하는 상황이 여전히 있으며, 이 경우 코드를 직접 작성해야 합니다.

페이지에 날짜 선택 컨트롤을 추가해야 한다고 가정해 보겠습니다. 이를 어떻게 구현해야 할까요? 다음은 간단한 샘플 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态添加日期选择控件示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <h1>动态添加日期选择控件示例</h1>
    <div id="datepicker"></div>
    <button id="addDatepicker">添加日期选择控件</button>
    <script>
        $(document).ready(function() {
            $('#addDatepicker').click(function() {
                $('#datepicker').datepicker();
            });
        });
    </script>
</body>
</html>

로그인 후 복사

위 코드에서는 jQuery 및 jQuery UI 관련 파일을 먼저 소개했습니다. 그런 다음 페이지에 div 요소를 추가하고 해당 ID를 "datepicker"로 설정했습니다. 다음으로 div 요소 아래에 버튼 요소가 추가되고 해당 ID가 "addDatepicker"로 설정됩니다.

마지막 스크립트 태그에서는 jQuery의 .ready() 메서드를 사용하여 페이지 DOM이 준비되었는지 확인한 다음 버튼에 클릭 이벤트를 추가합니다. 이 이벤트 핸들러에서는 jQuery UI에서 제공하는 datepicker() 메서드를 호출하여 Div 요소에 날짜 선택기를 추가합니다.

코드에는 문제가 없을 것 같은데 왜 날짜 선택기가 나타나지 않나요? 위의 코드는 페이지가 렌더링될 때 버튼을 렌더링할 수 있지만 클릭 후 날짜 선택기가 나타나지 않는다는 것을 발견했습니다.

분석 결과 버튼 추가 이벤트 기능에 문제가 있는 것으로 확인되었습니다. 더 정확하게 말하면 문제는 datepicker() 메서드에 있습니다. 이 문제가 발생하는 이유는 jQuery의 .load() 메서드가 더 이상 사용되지 않고 datepicker() 메서드가 .load() 메서드에 종속되기 때문입니다. 즉, .load() 메서드가 더 이상 지원되지 않으므로 datepicker() 메서드가 제대로 작동하지 않습니다.

이 문제를 해결하기 위해 보다 현대적인 방법을 사용하여 날짜 선택기를 동적으로 추가할 수 있습니다. 특히 jQuery의 .on() 메서드를 사용하여 다음과 같이 이벤트를 바인딩할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态添加日期选择控件示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <h1>动态添加日期选择控件示例</h1>
    <div id="datepicker"></div>
    <button id="addDatepicker">添加日期选择控件</button>
    <script>
        $(document).ready(function() {
            $('#addDatepicker').on('click', function() {
                $('<input>').appendTo('#datepicker').datepicker();
            });
        });
    </script>
</body>
</html>

로그인 후 복사

날짜 선택 컨트롤에 입력 상자를 추가한 다음 datepicker() 메서드를 호출해야 합니다. 이 방법은 잘 작동하고 날짜 선택기를 동적으로 추가합니다.

실제 응용에서는 위치 불일치, 형식 오류 등 다양한 문제에 자주 직면합니다. 일반적으로 jQuery의 날짜 선택기를 사용할 때 다음 사항에 주의해야 합니다.