AJAX अनुरोध के बाद jQuery दस्तावेज़ तैयार

Question

मुझे उन तत्वों को अद्यतन करने में समस्याएं आ रही हैं जो AJAX अनुरोध के बाद तैयार नहीं हैं।

अगर मैं ऐसा तरह पृष्ठ लोड पर मेरी myFunction() समारोह चलाएँ:

$(function() { 
myFunction(); 
} 

मैं सभी में कोई समस्या है। लेकिन अगर मैं तो जैसे

$.ajax({ 
     url: this.href, 
     dataType: "script", 
     complete: function(xhr, status) { 
     myFunction(); 
     } 
    }); 

जो $(".myElement").replaceWith("htmlHere") रिटर्न कुछ का उपयोग करें। पूर्ण घटना आग लगने पर तत्व बस तैयार नहीं होते हैं। अगर मैं वहां देरी करता हूं तो यह फिर से ठीक काम करता है।

क्या कोई अन्य घटना है जो डोम तैयार होने पर 'पूर्ण' के अलावा निकाल दिया जाता है?

अद्यतन:

यहाँ वास्तविक कोड है:

$(function() { 
    $("a.remote").live("click", function(e) {  
    $.ajax({ 
     url: this.href, 
     dataType: "script", 
     success: function(xhr, status) { 
       myFunction(); 
      } 
    }); 

    e.preventDefault(); 
    return false; 
    }); 

    myFunction(); 
}); 

function myFunction() { 
    // Modify the dom in here 
} 

लापता); मेरे हिस्से पर सिर्फ एक टाइपो था।

Ive ने पूर्ण होने की बजाय सफलता का उपयोग करने का प्रयास किया और यह कोई फर्क नहीं पड़ता।

Answer 1

$(function() { 
myFunction(); 
} 

$(document).ready(function() { 
myFunction(); 
}); 

होना चाहिए या बैठाना आप ajax लोड पर चलाना चाहते हैं। आप $(document).ready(function() { ... }); का उपयोग कुछ भी आप निकाल दिया जब डोम लोड होते ही चाहते लपेट के लिए कर सकते हैं करें

$(document).ready(function() { 
$.ajax(); 
}); 

Answer 2

। यदि आप डोम लोड होने तक प्रतीक्षा करना चाहते हैं तो आपका AJAX अनुरोध document.ready के अंदर रखा जा सकता है।

यदि आप AJAX के संसाधन को लोड करने तक प्रतीक्षा करना चाहते हैं तो आपको के बजाय ajax.success का उपयोग करना चाहिए।

Answer 3

आप दस्तावेज़ तैयार रैपर फ़ंक्शन के समापन कोष्ठक खो रहे हैं।

$(function() { 
myFunction(); 
}); 

अंत में }); पर ध्यान दें।

Answer 4

बस success: करने के लिए complete: बदलने अपने $.ajax() कॉल में: एक बार AJAX अनुरोध एक सफल प्रतिक्रिया मिलती है

$.ajax({ 
     url: this.href, 
     dataType: "script", 
     success: function(xhr, status) { 
     //make your DOM changes here 
     myFunction(); 
     } 
}); 

success समारोह चलेंगे। तो उस कार्य के भीतर अपने डोम परिवर्तन करें, और फिर myFunction() चलाएं।

संपादित
आप डोम अपने myFunction() का उपयोग कर परिवर्तन करने के प्रयास कर रहे हैं। लेकिन अगर आप डीओएम में AJAX प्रतिक्रिया में प्राप्त एचटीएमएल को पहले सम्मिलित नहीं करते हैं, तो संशोधित करने के लिए myFunction() के लिए कुछ भी नहीं होगा।

1. डोम में प्रतिक्रिया HTML शामिल करें, तो myFunction() फोन (और यह सब success कॉलबैक फ़ंक्शन के भीतर हो जाना चाहिए): यदि यह वास्तव में है क्या हो रहा है, तो आप दो विकल्प हैं।
2. myFunction() पर AJAX प्रतिक्रिया को एक तर्क के रूप में पास करें, ताकि myFunction() डीओएम सम्मिलन को संभाल सके और फिर आवश्यक संशोधन कर सके।

Answer 5

मैंने आपके कोड के आधार पर jsfiddle सेट किया है, और ऐसा लगता है कि यह काम कर रहा है।

यह वर्तमान कोड है:

$(function() { 
    $("a.remote").live("click", function(e) {  
    $.ajax({ 
     url: this.href, 
     dataType: "script", 
     success: function(xhr, status) { 
       myFunction(); 
      } 
    }); 

    e.preventDefault(); 
    return false; 
    }); 

}); 

function myFunction() { 
    $("span").replaceWith("<p>test</p>"); 
} 

और यह एक पैरा के साथ स्पैन टैग बदल देता है। कृपया इसे जांचें और अपने कोड से तुलना करें। यदि यह वही है, तो इस समस्या के अलावा कहीं आपकी समस्या (शायद मेरे समारोह में?)।

Answer 6

एक ऐसी घटना है जो प्रत्येक AJAX कॉल के बाद ट्रिगर होती है। इसे ajaxComplete कहा जाता है।

$(document).ajaxComplete(function() { 
    $(".log").text("Triggered ajaxComplete handler."); 
}); 

तो आप कर सकते हैं

function Init(){ 
    // stuff here 
} 

$(document).ready(function() 
    Init(); 
}); 
$(document).ajaxComplete(function() 
    Init(); 
});