تكرار منتقي البيانات jQuery

Question

ال datepicker تعمل الوظيفة فقط على مربع الإدخال الأول الذي تم إنشاؤه.

أحاول تكرار منتقي التاريخ عن طريق استنساخ ملف div الذي يحتوي عليه.

<a href="#" id="dupMe">click</a>
<div id="template">
  input-text <input type="text" value="text1" id="txt" />
  date time picker <input type="text" id="example" value="(add date)" />
</div>

لتهيئة منتقي التاريخ، وفقًا لـ وثائق واجهة المستخدم jQuery ليس لدي سوى أن أفعل $('#example').datepicker(); وهو يعمل بالفعل، ولكن فقط على منتقي التاريخ الأول الذي تم إنشاؤه.

الكود لتكرار div هو ما يلي:

$("a#dupMe").click(function(event){
  event.preventDefault();
  i++;
  var a = $("#template")
            .clone(true)
            .insertBefore("#template")
            .hide()
            .fadeIn(1000);
  a.find("input#txt").attr('value', i);
  a.find("input#example").datepicker();
});

والأغرب من ذلك هو أن على document.ready أملك:

$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });

وإذا قمت بالنقر فوق #txt إنه يعمل دائمًا.

Answer 1

أوصي فقط باستخدام اسم فئة شائع أيضًا.ومع ذلك، إذا كنت ضد ذلك لسبب ما، فيمكنك أيضًا كتابة وظيفة لإنشاء منتقيات التاريخ لجميع مربعات النص في القالب الخاص بك div (يتم استدعاؤه بعد كل تكرار).شيء مثل:

function makeDatePickers() {
  $("#template input[type=text]").datepicker();
}

Answer 2

أستخدم فئة CSS بدلاً من ذلك:

<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />

ثم في الخاص بك document.ready وظيفة:

$('.calendar').datepicker();

استخدامه بهذه الطريقة لحقول تقويم متعددة يناسبني.

Answer 3

واجهت مشكلة مشابهة جدًا وبعد ساعات من الاختبار وجدت الحل.كنت أقوم بنسخ كتلة من تعليمات HTML البرمجية وإدراجها بعد قسم يحتوي بالفعل على تقويم منتقي تاريخ jQuery.ما فشلت في إدراكه في البداية هو أن تقويم jQuery UI يعدل فئة العنصر عند تنفيذ الأمر .datepicker() وظيفة.والنتيجة هي عندما تحاول نسخ الكود وبدء مثيل جديد للتقويم لهذا القسم الجديد، فإنه يفشل لأنه وفقًا لـ CSS يوجد بالفعل واحد.إذا حاولت استخدام .datepicker('destroy') فشل هذا في تدمير مثيل الشبح هذا لأنه غير موجود بالفعل.لقد قمت بحل المشكلة عن طريق إعادة تعيين فئة عنصر منتقي التاريخ في HTML الخاص بي ثم إضافة منتقي التاريخ إلى هذا العنصر ...

أدناه هو الرمز الذي كنت أستخدمه.نأمل أن يوفر هذا لشخص آخر بعض الوقت ...

$('#addaddress').click(function() {
  var count = $('.address_template').size();
  var html = $('.address_template').eq(0).html();
  $('#addaddress').before('<div class="address_template">' + html + '</div>');
  $('.address_template H1').eq(count).html("Previous Address " + count);
  $('.address_date').eq(count).attr("class","address_date");
  $('.address_date').eq(count).attr("id","movein" + count);
  $("#movein" + count).datepicker();
});

Answer 4

يحتوي HTML الذي أقوم باستنساخه على مدخلات متعددة لمنتقي التاريخ.

باستخدام إجابة ريان ستيمكوسكي وتعليق أليكس كينغ، توصلت إلى هذا الحل:

var clonedObject = this.el.find('.jLo:last-child')
clonedObject.find('input.ui-datepicker').each(function(index, element) {
    $(element).removeClass('hasDatepicker');
    $(element).datepicker();
});
clonedObject.appendTo('.jLo');

شكرا يال.