Rumah > Artikel > hujung hadapan web > jquery tidak boleh menambah tarikh secara dinamik
jquery tidak boleh menambah tarikh secara dinamik
- PHPzasal
- 2023-05-11 17:41:07408semak imbas
Dalam beberapa tahun kebelakangan ini, dengan pembangunan berterusan teknologi hadapan, jQuery telah menjadi salah satu perpustakaan JavaScript yang paling biasa digunakan dalam pembangunan web. Ia menyediakan pelbagai antara muka dan fungsi yang ringkas dan mudah digunakan, yang sangat memudahkan kerja pengekodan JavaScript. Walau bagaimanapun, dalam aplikasi praktikal, kita pasti akan menghadapi beberapa kesukaran. Artikel ini akan memfokuskan pada satu isu: cara menambahkan pemilih tarikh secara dinamik.
Pemilih tarikh ialah salah satu kawalan yang biasa digunakan dalam borang web. Dalam jQuery, terdapat juga pelbagai pemalam pemilih untuk kita gunakan. Walau bagaimanapun, masih terdapat beberapa situasi di mana kita perlu menambah pemilih tarikh secara dinamik, dan dalam kes ini kita perlu menulis kod itu sendiri.
Andaikan kita perlu menambah kawalan pemilihan tarikh pada halaman. Berikut ialah contoh kod mudah:
<!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>Dalam kod di atas, kami mula-mula memperkenalkan fail berkaitan jQuery dan jQuery UI. Kemudian, kami menambah elemen div pada halaman dan menetapkan idnya kepada "datepicker". Seterusnya, elemen butang ditambah di bawah elemen div dan idnya ditetapkan kepada "addDatepicker".
Dalam teg skrip terakhir, kami menggunakan kaedah .ready() jQuery untuk menentukan bahawa DOM halaman sudah sedia, dan kemudian menambah acara klik pada butang. Dalam pengendali acara ini, kami memanggil kaedah datepicker() yang disediakan oleh UI jQuery untuk menambah pemilih tarikh pada elemen Div.
Nampaknya tiada masalah dengan kod itu, jadi mengapa pemilih tarikh tidak muncul? Kami mendapati bahawa walaupun kod di atas boleh memaparkan butang apabila halaman dipaparkan, pemilih tarikh tidak muncul selepas mengklik.
Selepas analisis, kami mendapati bahawa masalahnya terletak pada fungsi acara tambah butang. Lebih tepat lagi, masalahnya terletak pada kaedah datepicker(). Sebab masalah ini ialah kaedah .load() jQuery telah ditamatkan dan kaedah datepicker() bergantung pada kaedah .load(). Dalam erti kata lain, kerana kaedah .load() tidak lagi disokong, kaedah datepicker() tidak boleh berfungsi dengan betul.
Untuk menyelesaikan masalah ini, kita boleh menggunakan pendekatan yang lebih moden untuk menambah pemilih tarikh secara dinamik. Khususnya, kita boleh menggunakan kaedah .on() jQuery untuk mengikat acara seperti berikut:
<!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>Kita perlu menambah kotak Input pada kawalan datepicker dan kemudian memanggil kaedah datepicker(). Cara ini berfungsi dengan baik dan menambah pemilih tarikh secara dinamik.
Dalam aplikasi praktikal, kami sering menghadapi pelbagai masalah seperti ketidakpadanan kedudukan dan ralat format. Secara umum, apabila menggunakan pemilih tarikh jQuery, kita perlu memberi perhatian kepada perkara berikut:
- Perkenalkan fail yang diperlukan dengan sewajarnya. Fail JQuery dan jQuery UI yang berkaitan perlu diperkenalkan.
- Gunakan kaedah mengikat acara terkini. Kaedah lama telah ditamatkan.
- Ikuti contoh pada API dan gunakan kaedah yang berkaitan dengan betul.
- Perhatikan format tarikh. Negara dan wilayah yang berbeza mempunyai format masa yang berbeza, jadi anda perlu memberi perhatian.
Ringkasnya, menambah pemilih tarikh secara dinamik nampak mudah, tetapi sebenarnya ia membawa banyak masalah. Hanya dengan membaca dokumentasi API dengan teliti, menyeragamkan kod dan memberi perhatian kepada format masa dan isu lain boleh kod kami berjalan seperti biasa.
Atas ialah kandungan terperinci jquery tidak boleh menambah tarikh secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!