การวาง datepicker () บนองค์ประกอบที่สร้างแบบไดนามิก - JQuery / JQueryUI

ฉันได้สร้างกล่องข้อความแบบไดนามิกและต้องการให้แต่ละกล่องสามารถแสดงปฏิทินได้เมื่อคลิก รหัสที่ฉันใช้คือ:

$(".datepicker_recurring_start" ).datepicker();

ซึ่งจะใช้ได้เฉพาะในกล่องข้อความแรกแม้ว่ากล่องข้อความทั้งหมดของฉันจะมีคลาสที่เรียกว่า datepicker_recurring_start

ความช่วยเหลือของคุณได้รับการชื่นชมมาก!

นี่คือเคล็ดลับ:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

การสาธิต

$('...selector..').on('..event..', '...another-selector...', ...callback...);ไวยากรณ์หมายถึง:
เพิ่มฟังให้...selector..(คนbodyในตัวอย่างของเรา) สำหรับเหตุการณ์..event..( 'โฟกัส' ในตัวอย่างของเรา) สำหรับลูกหลานทั้งหมดของโหนดที่ตรงกันที่ตรงกับตัวเลือก...another-selector...( .datepicker_recurring_startในตัวอย่างของเรา) ให้ใช้ตัวจัดการเหตุการณ์...callback...(ฟังก์ชันอินไลน์ในตัวอย่างของเรา)

ดูhttp://api.jquery.com/on/และโดยเฉพาะอย่างยิ่งส่วนเกี่ยวกับ "เหตุการณ์ที่ได้รับมอบหมาย"

สำหรับฉันด้านล่าง jquery ทำงาน:

เปลี่ยน "body" เป็นเอกสาร

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

ขอบคุณข้อมูลskafandri

หมายเหตุ: ตรวจสอบว่า ID ของคุณแตกต่างกันในแต่ละฟิลด์

คำตอบที่ยอดเยี่ยมโดย skafandri +1

นี่เป็นเพียงการอัปเดตเพื่อตรวจสอบคลาส hasDatepicker

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

ตรวจสอบให้แน่ใจองค์ประกอบของคุณที่มี.date-pickerระดับไม่ได้มีhasDatepickerระดับ หากเป็นเช่นนั้นแม้แต่การพยายามเริ่มต้นใหม่อีกครั้ง$myDatepicker.datepicker();ก็จะล้มเหลว! แต่คุณต้องทำ ...

$myDatepicker.removeClass('hasDatepicker').datepicker();

คุณต้องเรียกใช้.datepicker();อีกครั้งหลังจากที่คุณสร้างองค์ประกอบกล่องข้อความอื่นแบบไดนามิกแล้ว

ฉันขอแนะนำให้ทำในวิธีการโทรกลับของการโทรที่กำลังเพิ่มองค์ประกอบใน DOM

สมมติว่าคุณใช้วิธีการโหลด JQuery เพื่อดึงองค์ประกอบจากแหล่งที่มาและโหลดลงใน DOM คุณจะต้องทำสิ่งนี้:

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});

วิธีการใหม่สำหรับองค์ประกอบไดนามิกคือMutationsObserver .. ตัวอย่างต่อไปนี้ใช้underscore.jsเพื่อใช้ฟังก์ชัน (_.each)

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;    

var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {

    _.each(repeaterWrapper, function (repeaterItem, index) {

        var jq_nodes = $(repeaterItem.addedNodes);

        jq_nodes.each(function () {

            // Date Picker
            $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
                dateFormat: "dd MM, yy",
                showAnim: "slideDown",
                changeMonth: true,
                numberOfMonths: 1
            });

        });

    });

});

observerjQueryPlugins.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});

นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน (ใช้ jquery datepicker):

$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});

ไม่มีวิธีแก้ปัญหาอื่นใดที่ใช้ได้ผลสำหรับฉัน ในแอพของฉันฉันกำลังเพิ่มองค์ประกอบช่วงวันที่ลงในเอกสารโดยใช้ jquery แล้วใช้ datepicker กับพวกมัน ดังนั้นจึงไม่มีวิธีแก้ปัญหาเหตุการณ์ใดที่ใช้ได้ผลด้วยเหตุผลบางประการ

นี่คือสิ่งที่ได้ผลในที่สุด:

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

หวังว่านี่จะช่วยใครบางคนได้เพราะสิ่งนี้ทำให้ฉันย้อนกลับไปเล็กน้อย

คุณสามารถเพิ่ม class .datepicker ในฟังก์ชัน javascript เพื่อให้สามารถเปลี่ยนประเภทอินพุตแบบไดนามิก

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

ฉันได้แก้ไขคำตอบของ @skafandri เพื่อหลีกเลี่ยงการใช้ตัวdatepickerสร้างซ้ำกับอินพุตทั้งหมดที่มี.datepicker_recurring_startคลาส

นี่คือ HTML:

<div id="content"></div>
<button id="cmd">add a datepicker</button>

นี่คือ JS:

$('#cmd').click(function() {
  var new_datepicker = $('<input type="text">').datepicker();
  $('#content').append('<br>a datepicker ').append(new_datepicker);
});

นี่คือการสาธิตที่ใช้งานได้

นี่คือสิ่งที่ใช้ได้ผลสำหรับฉันบน JQuery 1.3 และแสดงในคลิกแรก / โฟกัส

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

สิ่งนี้ต้องการให้ข้อมูลของคุณมีคลาส 'mostrar_calendario'

Live มีไว้สำหรับ JQuery 1.3+ สำหรับเวอร์ชันที่ใหม่กว่าคุณต้องปรับให้เป็น "เปิด"

ดูเพิ่มเติมเกี่ยวกับความแตกต่างที่นี่http://api.jquery.com/live/

$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});