jQuery datepicker एक AJAX पर काम नहीं करेगा HTML तत्व

Question

जोड़ा मैं एक jQuery datepicker समारोह "जन्मदिन" इनपुट एचटीएमएल तत्व के लिए बाध्य, पृष्ठ शीर्षक में लिखा है:

<script type="text/javascript"> 
    $(function() { 
     $("#birthday").datepicker(); 
    }); 
</script> 

इसके बाद, मैं कुछ AJAX है कार्यक्षमता - यह पृष्ठ पर नया इनपुट HTML तत्व जोड़ता है। यही कारण है कि तत्व है:

<input type="text" id="birthday" value="" class="detail-textbox1" /> 

कि जन्मदिन तत्व पर क्लिक करने से पॉप अप नहीं करता पाठ फ़ील्ड के नीचे दिनांक पिकर। मुझे इसकी उम्मीद थी, क्योंकि पेज लोड होने के बाद तत्व जोड़ा जाता है, इस प्रकार यह हेडर में दिए गए फ़ंक्शन के संबंध में नहीं है।

मैं इसे कैसे काम कर सकता हूं? मैंने स्क्रिप्ट को हेडर से शरीर में ले जाने की कोशिश की, लेकिन कुछ भी काम नहीं करता है। धन्यवाद।

पीएस यदि मैं पेज बॉडी में आईडी = "जन्मदिन" के साथ इनपुट एचटीएमएल तत्व बनाता हूं, तो प्रत्येक व्यक्ति अपेक्षित काम करता है। ऐसा प्रतीत होता है कि केवल AJAX के माध्यम से जोड़े गए तत्व निष्क्रिय हैं। http://api.jquery.com/live/

$('#birthday').bind('load', function() { 
    $(this).datepicker(); 
}); 

संपादित

.live() documentation राज्यों, कि यह थोड़ा पुराना हो चुका है:

Answer 1

आप) .live उपयोग करने के लिए (ताकि किसी भी नए जोड़े तत्वों ईवेंट हैंडलर संलग्न की जरूरत है । Jquery (1.7+) के नए संस्करणों के साथ .on() का उपयोग करें।

Answer 2

आप अपने ajax सफलता कॉलबैक के भीतर नए जोड़े गए तत्व के लिए दिनांक पिकर को प्रारंभ कर सकते हैं:

$.ajax({ 

    ... 

    success: function(response) { 
     if(response.success) { 
       $(body).append(response.html); 
       $("#birthday").datepicker(); 
     } 
    } 
}); 

Answer 3

बोरिस, जे: यह मेरे लिए सुपर मददगार था। मैंने यह भी पाया है कि आप आप Datepicker का दिनांक सीमा का चयन उपयोग करना चाहते हैं AJAX एचटीएमएल लिए निम्न का उपयोग कर सकते हैं:

$('#groundtransporation').live('focus', function() { 
var gt = $("#rentalPickUp, #rentalDropOff").datepicker({ 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 2, 
    onSelect: function(selectedDate) { 
    var option = this.id == "rentalPickUp" ? "minDate" : "maxDate", 
     instance = $(this).data("datepicker"), 
     date = $.datepicker.parseDate(
     instance.settings.dateFormat || 
     $.datepicker._defaults.dateFormat, 
     selectedDate, instance.settings); 
    gt.not(this).datepicker("option", option, date); 
    } 
}); 
}); 

Answer 4

मैं पार्टी के लिए थोड़ी देर हो चुकी हूँ, लेकिन पूर्णता के लिए - और किया जा रहा है .live() समारोह के साथ deprecated from jQuery 1.7 आगे - मैंने सोचा कि मैं अपने अनुभवों के आधार पर एक अद्यतन समाधान प्रदान करूंगा, और स्टैक ओवरव्लो पर अन्य उत्तरों से मिली सभी मदद से!

मैं एक स्थिति है जहाँ मैं इनपुट फ़ील्ड कि डोम को जोड़ा जा रहा था के माध्यम से AJAX यादृच्छिक पर कॉल करने के लिए datepicker कार्यक्षमता जोड़ने के लिए की जरूरत थी, और मुझे स्क्रिप्ट AJAX datepicker कार्यक्षमता संलग्न करने के लिए कहता है बनाते हुए बदल नहीं कर सकता है, इसलिए मैं अपने प्रतिनिधिमंडल सुविधाओं के साथ नई चमकदार .on() समारोह के लिए चुना:

// do this once the DOM's available... 
$(function(){ 

    // this line will add an event handler to the selected inputs, both 
    // current and future, whenever they are clicked... 
    // this is delegation at work, and you can use any containing element 
    // you like - I just used the "body" tag for convenience... 
    $("body").on("click", ".my_input_element", function(){ 

     // as an added bonus, if you are afraid of attaching the "datepicker" 
     // multiple times, you can check for the "hasDatepicker" class... 
     if (!$(this).hasClass("hasDatepicker")) 
     { 
      $(this).datepicker(); 
      $(this).datepicker("show"); 
     } 
    }); 
}); 

मुझे आशा है कि यह किसी को मदद करता है, और सभी उत्तर के लिए धन्यवाद अब तक कि मुझे इस समाधान है कि मेरे लिए काम किया करने के लिए नेतृत्व! :)

Answer 5

मुझे एक और मामला मिला। मेरी स्क्रिप्ट डेटपिकर सहित अंतिम तालिका तत्वों की प्रतिलिपि बना रही है।

jquery काम नहीं करेगा क्योंकि कॉपी किए गए तत्व ने चिह्नित किया है कि यह "हैडपिकर" है।

नए तत्व में डेटपिकर को सक्रिय करने के लिए, उस वर्ग का नाम हटाएं और इसे शुरू करें।

$ ("# yournewelementid")। Attr ("class", "your-class-name"); $ ("# yournewelementid")। Datepicker();

Answer 6

आपकी समस्या तब होती है जब तत्व प्रारंभ नहीं होने पर तत्व मौजूद नहीं होते हैं।

जब आप $ (फ़ंक्शन() {/** कुछ कोड **/} का उपयोग करते हैं); तत्वों को दस्तावेज़ पर बाहर निकलना होगा, इसका मतलब है कि एचटीएमएल पर होना चाहिए ताकि आप घटक को आरंभ करने के लिए कोई फ़ंक्शन बना सकें या इसे दस्तावेज़ में जोड़ने के बाद सफलता कार्यक्रम पर प्रारंभ कर सकें।

पहले इसे प्रारंभ करने का प्रयास करने से पहले दस्तावेज़ में AJAX अनुरोध में बाहरी HTML लोड जोड़ने के लिए महत्वपूर्ण है या यह बिल्कुल प्रारंभ नहीं होगा।
उदाहरण:

$ .ajax ({
        यूआरएल: "ajax_html.html",
        डेटाप्रकार: "html"
})। किया (समारोह (एचटीएमएल) {
        $ ("# चयनकर्ता")। html (एचटीएमएल)
        init();
}); ।

समारोह init() {
        $ ("। जन्मदिन") datepicker ({});
}