JQuery datepicker方法不能处理重复元素 [英] JQuery datepicker method not working on duplicate element
问题描述
我正在尝试使用JQuery教程指定的datepicker添加日历对象。这是一个事件表单，我需要添加更多事件来选择不同的事件日期，所以我要做的是复制表单中的元素以重用。这意味着日历输入标记也会重复。但是，执行此操作时，日历datepicker方法将不会调用（或至少不会弹出日历）。为什么会这样？我的代码就在这里：
I'm trying to add a calendar object using the datepicker as specified by JQuery tutorials. This is for an event form, and I need to add more events to select different event dates, so what I do is duplicate the elements within the form to reuse. This means the calendar input tag also gets duplicated. But, upon doing this, the calendar datepicker method will not call (or at least, it won't pop up the calendar). Why does this happen? I have the code right here:
<html>
<head>
<title>Calendar duplicate testing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( ".cal" ).datepicker();
});
function duplicateCalendar() {
var calendars = document.getElementsByClassName("calendarinstance");
var newcalendar = calendars[calendars.length - 1].cloneNode(true);
calendars[calendars.length - 1].appendChild(newcalendar);
}
</script>
</head>
<body>
<button type="button" onclick="duplicateCalendar();">Duplicate Calendar</button>
<br><br>
<div class="calendarinstance">
<img src="calendar.png" alt=""> Select Date: <input class="cal" type="text">
<br>
<hr>
<br>
<div>
</body>
</html>
您可以点击此处。我只是放置日历对象，因为它是一件不起作用的东西。提前感谢您的帮助！
You can see this code clicking here. I'm only putting the calendar object as it is the one thing that doesn't work. Thank you in advance for anyone's help!
推荐答案
jQuery选择器 $（。cal）。 datepicker（）; 只会选择多个同名类的第一个实例。
The jQuery selector $( ".cal" ).datepicker(); will only select the first instance of multiple classes of the same name.
看看。each（）到达所有类。
调用此函数duplicateCalendar（）以及现有代码：
Call this function on duplicateCalendar() along with the existing code:
$(function() {
$( ".cal" ).each(function() {
$( this ).datepicker();
});
});
这篇关于JQuery datepicker方法不能处理重复元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
