AJAX

Question

के साथ किसी पृष्ठ में एचटीएमएल डालने के बाद डोम तत्वों का चयन करना मैंने पेज में डाले गए एचटीएमएल के साथ एक अजाक्स टैब नेविगेशन बनाया। कोड इस तरह दिखता है:

$.ajax({ 
     type: 'POST', 
     url: 'main/ajaxjson/load_course_details', 
     data: {page : which, course_id: id}, 
     success: function(home){ 

      $('#ajax-content ').hide(); 
      $('#ajax-content').empty().append(home); 
      $('#ajax-content').fadeIn(); 
     } 

    }); 

ठीक है ... तो मैं अपने एचटीएमएल में अपना मार्कअप जोड़ता हूं। अब मुझे डाले गए एचटीएमएल से डोम तत्वों का चयन करने की जरूरत है, लेकिन मैं नहीं कर सकता। मेरे पास निम्न कोड है:

<a href="javascript:;" class="light-button">Next</a> 
<select id="chapters-select"> 
    <?php foreach ($chapters as $chapter) : ?> 
    <option value="<?php echo $chapter->id; ?>"><?php echo $chapter->title; ?></option> 
    <?php endforeach; ?> 
</select> 

यहां मैं चुनिंदा विकल्पों को गतिशील रूप से उत्पन्न करता हूं। जब मैं यह करने के लिए प्रयास करें:

$('#chapters-select').change(function(){ 
    alert('changed'); 
}); 

यह काम नहीं करता। मैं AJAX के माध्यम से HTML को जोड़ने के बाद जावास्क्रिप्ट का उपयोग कैसे कर सकता हूं? संस्करण 1.7+

$('body').on('change', '#chapters-select', function(){ 
    alert('changed'); 
}); 

आप निकटतम स्थिर लिखना चाहिए body के बजाय प्रदर्शन बढ़ाने के लिए के लिए on तरह

Answer 1

उपयोग प्रतिनिधि घटना (नहीं जोड़ा ajax या जावास्क्रिप्ट के साथ गतिशील) तत्व यह है कि "यह मानता है chapters-select

यदि आप jQuery के पुराने संस्करण का उपयोग कर रहे हैं तो निम्न तालिका के साथ उपयुक्त विधि चुनें:

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

ondocs:

जब एक चयनकर्ता प्रदान की जाती है, ईवेंट हैंडलर के रूप में सौंप जाना जाता है। जब ईवेंट सीधे बाध्य तत्व पर होता है तो हैंडलर को नहीं कहा जाता है, लेकिन केवल चयनकर्ताओं से मेल खाने वाले वंशज (आंतरिक तत्व) के लिए होता है। jQuery घटना से लक्ष्य को उस तत्व तक लक्षित करता है जहां हैंडलर संलग्न होता है (यानी, बाहरी तत्व के लिए सबसे ऊपर) और चयनकर्ता से मेल खाने वाले पथ के साथ किसी भी तत्व के लिए हैंडलर चलाता है।

इवेंट हैंडलर केवल वर्तमान में चयनित तत्वों के लिए बाध्य हैं; जब आप अपना कोड कॉल करते हैं तो वे पृष्ठ पर मौजूद होना चाहिए।()। यह सुनिश्चित करने के लिए कि तत्व मौजूद हैं और चुना जा सकता है, पृष्ठ पर HTML मार्कअप में मौजूद तत्वों के लिए दस्तावेज़ तैयार हैंडलर के अंदर ईवेंट बाध्यकारी करें। यदि पृष्ठ में नए HTML को इंजेक्शन दिया जा रहा है, तत्वों का चयन करें और नए HTML के बाद ईवेंट हैंडलर संलग्न करें पृष्ठ में रखा गया है। या, अगले वर्णित अनुसार एक ईवेंट हैंडलर संलग्न करने के लिए प्रतिनिधि कार्यक्रमों का उपयोग करें।

Answer 2

पृष्ठ के पहले लोड के बाद इसे एक बार चलाएं।

$("body").delegate('#chapters-select','change', function(){ 
    alert('changed'); 
}); 

यह @ gdoron के जवाब के बराबर है, लेकिन jQuery के संस्करणों के साथ संगत है से अधिक उम्र के 1.7