AJAX के साथ HTML लोड करने के बाद jQuery परिवर्तन फ़ंक्शन क्यों काम नहीं करता है?

Question

मैं एक फॉर्म लोड करता हूं और गतिशील रूप से एक PHP फ़ाइल से AJAX के माध्यम से एक चयन पॉप्युलेट करता हूं। गतिशील AJAX जनसंख्या का चयन करने से पहले, मेरा परिवर्तन फ़ंक्शन काम करता है (जब कोई उपयोगकर्ता 'अन्य' चुनता है तो यह केवल एक और इनपुट दिखाता है)। अब परिवर्तन समारोह काम नहीं करता है।

मुझे पता है कि तैयार फ़ंक्शन फायरिंग है क्योंकि jStepper फ़ंक्शन चलाते हैं। मैंने इसे तैयार फ़ंक्शन में और बाहर परिवर्तन फ़ंक्शन के साथ करने की कोशिश की है। मुझे लगता है कि AJAX प्राप्त होने से पहले परिवर्तन फ़ंक्शन लोड हो रहा है, लेकिन क्या इससे वाकई कोई फर्क पड़ता है?

var types = "<select name='ve_categoryNo' id='ve_categoryNo'>"; 
var d = new Date(); 
$.get('scripts/vehicle_category_feed.php?date=' + d.getTime(), function ($type) 
{ 
    $($type).find('type').each(function() 
    { 
     types += "<option value='" + $(this).attr("categoryno") + "'>" + $(this).attr("category") + "</option>"; 
    }); 
    types += "<option value='other'>Other(Specify)</option></select>"; 
    $('#ve_categoryNo_td').html(types); 
}); 
$(document).ready(function() 
{ 
    $('input[type=text]').click(function() 
    { 
     $(this).select(); 
    }); 
    $('#vehicle_entry').ajaxForm(function() 
    { 
     showMessage('vehicle_information_added'); 
    }); 
    $('#ve_ariNo').jStepper({minValue: 1, maxValue: 99999999}); 
    $('#ve_fleetNo').jStepper({minValue: 1, maxValue: 999999999}); 
    $('#ve_vehicleYear').jStepper(); 
    $('#ve_purchasePrice').jStepper({minValue: 0}); 
    $('#ve_categoryNo').change(function() 
    { 
     if ((this.value) == "other") 
     { 
      $('#otherCategory').show(); 
      $('#otherCategory input[type=text]').focus(); 
     } else 
     { 
      $('#otherCategory').hide(); 
     } 
    }); 
}); 

Answer 1

इस संशोधित:

$('#ve_categoryNo').change(function() { 

को

$(document).on('change', '#ve_categoryNo', function() { 

EDIT3:

$('#ve_categoryNo_td').on('change', '#ve_categoryNo', function() { 

यह रूप में

: यह आपके कोड की जांच और अधिक बारीकी से करने के बाद सर्वश्रेष्ठ प्रदर्शन करेगा प्रश्न में तत्व के निकटतम बांधता है।

---

आपको अजीब कॉल को तैयार स्क्रिप्ट के अंदर भी रखना चाहिए जो मुझे लगता है।

ऐसा होने का कारण यह है कि डीओएम में तत्काल होने पर बाध्य करने के लिए कुछ भी नहीं है। इस तरह से .on का उपयोग करके इसे दस्तावेज़ में बाध्य करता है। यदि आपके पास एक और "निश्चित" तत्व था जो इसे लपेटता है, तो उस पर "दस्तावेज़" के स्थान पर इसका उपयोग करना बेहतर हो सकता है क्योंकि यह संभवतः बेहतर प्रदर्शन करेगा।

संपादित करें: ध्यान दें कि आप AJAX कॉल समापन के हिस्से के रूप में तत्व को इंजेक्ट करने के बाद परिवर्तन ईवेंट प्रबंधन भी जोड़ सकते हैं, लेकिन यदि आप इसे एक से अधिक बार करते हैं, तो आपको इसे पहले उस मामले में खोलना चाहिए।

EDIT2: दस्तावेज़ से: http://api.jquery.com/on/

दस्तावेज़ पेड़ के शीर्ष के निकट कई सौंप ईवेंट हैंडलर्स अटैच किया जा रहा प्रदर्शन में कमी कर सकते हैं के बाद से वहाँ प्रश्नों/टिप्पणियों को कर रहे हैं। प्रत्येक बार ईवेंट होने पर, jQuery को दस्तावेज़ के शीर्ष तक ईवेंट लक्ष्य से पथ में प्रत्येक तत्व के सभी प्रकार की संलग्न घटनाओं के सभी चयनकर्ताओं की तुलना करना चाहिए। सर्वोत्तम प्रदर्शन के लिए, लक्षित तत्वों के लिए जितना संभव हो सके दस्तावेज़ स्थान पर प्रतिनिधि कार्यक्रम संलग्न करें। अत्यधिक दस्तावेज या दस्तावेज़ का उपयोग करें। दस्तावेजों पर प्रतिनिधि कार्यक्रमों के लिए।

Answer 2

मुझे लगता है कि तत्व आप लाइन में के लिए बाध्य कर रहे हैं:

$('#ve_categoryNo').change(function() { ... 

अभी तक डोम में मौजूद नहीं है, इसलिए घटना बाध्य नहीं मिलता है।

.live समारोह का उपयोग करके देखें:

$('#ve_categoryNo').live('change', function() { ... }); 

या सुनिश्चित करें कि आपके डोम तत्वों मौजूद से पहले उन्हें घटनाओं बाध्य करने के लिए प्रयास करें।

Answer 3

दस्तावेज़ बदलने के लिए तैयार से काम अजाक्स कार्यक्षमता काम करता है

$(document).change(function(){ 
    $("#next").click(function() { 
    var questionid = $('#question').val();   
    var assementid = $('#assement').val();   
    var userid  = $('#user').val();   
    if($('.ansradio').is(':checked')) { 
     var answer = $('input[name=ans]:checked', '#questionajax').val(); 
     $.ajax({ 
      type: "POST", 
      url: "answer/", 
      data: "q_id="+questionid+"&a_id="+assementid+"&answer="+answer+"&user_id="+userid, 
      success: function(html){ 
       $("#questionajax").html(html).show(); 
      } 
     }); 
    } 
    else{ 
     alert("Please answer the questions"); 
    }  
    }); 

});