jqueryは動的に日付を追加できません-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-05-11 17:41:07

オリジナル

472 人が閲覧しました

近年、フロントエンドテクノロジの継続的な開発により、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 の日付ピッカーを使用する場合は、次の点に注意する必要があります。