ホームページ > 記事 > ウェブフロントエンド > jqueryは動的に日付を追加できません

jqueryは動的に日付を追加できません

PHPzオリジナル: 2023-05-11 17:41:07448ブラウズ

近年、フロントエンドテクノロジの継続的な開発により、jQuery は Web 開発で最も一般的に使用される JavaScript ライブラリの 1 つになりました。シンプルで使いやすいさまざまなインターフェイスと関数を提供し、JavaScript のコーディング作業を大幅に簡素化します。しかし、実際に応用しようとすると、必ずいくつかの困難に遭遇します。この記事では、日付ピッカーを動的に追加する方法という 1 つの問題に焦点を当てます。

日付ピッカーは、Web フォームでよく使用されるコントロールの 1 つです。 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 要素の下に button 要素が追加され、その 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 の日付ピッカーを使用する場合は、次の点に注意する必要があります。

必要なファイルを適切に導入します。 JQueryおよびjQuery UIの関連ファイルを導入する必要があります。
最新のイベントバインディングメソッドを使用します。古いメソッドは廃止されました。
API の例に従い、関連するメソッドを正しく使用してください。
日付の形式に注意してください。国や地域によって時刻の形式が異なるため、注意が必要です。

つまり、日付ピッカーを動的に追加することは簡単そうに見えますが、実際には多くの問題を引き起こします。 API ドキュメントを注意深く読み、コードを標準化し、時刻形式やその他の問題に注意を払うことによってのみ、コードを正常に実行できます。

以上がjqueryは動的に日付を追加できませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Nodejs tarのインストール次の記事：Nodejs tarのインストール

続きを見る