jquery.ajax() yüklü sayfalarda çalışan komut dosyaları document.ready dosyasını çok erken çalıştırıyor

Question

Sitem, sayfanın büyük bir bölümünde gezinme yapmak için jquery.load() kullanıyordu. Gerçekten yeteneğini takdir etmek sadece yüklenen içeriğin sadece belirli bir bölümünü, id = "içerik" ile burada div şunlardır:

$(frame_selector).load(url +" #content", function(response, status, xhr) {...}); 

Ama şimdi sayfaların parçası olan komut dosyalarını çalıştırmak gerekiyor dinamik olarak yüklenir. Jquery.load(), bu komut dosyalarını çıkarır ancak jquery.ajax() yapmaz. Bu yüzden gibi bir ajax çağrısında jquery.load kısmi içerikli işlevselliği çoğaltılamaz:

$.ajax({ 
    url: url, 
    dataType: 'html', 
    success: function(data, textStatus, XMLHttpRequest) { 
     // Only include the response within the #content id element. 
     $(frame_selector).html(jQuery("<div>") 
      .append(data) 
      .find("#content") 
    ); 
    } 
}); 

Sorun dinamik ajax çağrısından yüklenirken komut güvenilir çalışmıyor olmasıdır. Bazen herhangi bir etkisi yok gibi görünüyorlar, belki de çok erken çalışıyorlar. Komut dosyaları jquery'de sadece DOM manipülasyonunu yapıyor - resimlere veya flaşa veya henüz yüklenmesi gerekmeyen bir şeye güvenmiyor. Sıkışmaya devam etmek için, işleri halletmek için bu iğrenç hackim var. Bunun yerine sadece kullanarak AJAX yüklü senaryonun:

$(document).ready(function() {...}); // unreliable 

Ben çalıştırmadan önce komut 200ms gecikme:

$(document).ready(window.setTimeout(function() {...}, 200)); // HATE THIS 

Herkes ben bir gecikme sabit kodlama olmadan güvenilir bu işi yapmak nasıl biliyor musunuz? Ben <script> ve #content yüklemek için benim mantığı yeni bir div içine yüklemek için bir yarış durumu olduğunu tahmin ediyorum, ama bu konuda ne yapacağından emin değilim.

Answer 1

Komut dosyalarının AJAX aracılığıyla eklediğiniz DOM öğeleri üzerinde manipülasyon yaptığını varsayalım.

jQuery sayfasındaki ready olayının tetiklemesinin ardından ayarlanmış bir isReady özelliğine sahiptir.

jQuery.ready(...) numaralı tüm çağrılar, önce bu isReady bayrağını kontrol edecektir. Bayrak true değerine ayarlanırsa, işleyiciyi hemen arayacaktır. Bunun neden kodunuzda sorunlara neden olabileceğini görebilirsiniz.

Yanıtı bir jQuery parçasına yüklemek ve daha sonra yürütmek üzere tüm <script /> etiketlerini ayrıştırmak bir seçenek olacaktır.

var ajaxResponse = $(html); 
var scripts = ajaxResponse.find('script'); 

// Move your scripts into a new element 
var tempScripts = $().append(scripts); 

// Append your content, followed by your script tags 
$(document).append(ajaxResponse); 
$(document).append(tempScripts); 

Answer 2

@Dan cevabı vardır. Scriptleri ajax ile yüklerken isReady belgesi doğrudur.

<script type="text/javascript"> 
    if (jQuery.isReady) { 
     $('body').append("<div id='new_content'>Document Ready</div>"); 
    } 
    else { 
     $('body').append("<div id='new_content'>Document Not Ready</div>"); 
    } 
</script> 

yerine ayrıştırma JSON kullanmak: Bu ajax isteği tarafından istenen komut dosyası etiketi ise bu demektir. Bir özellik HTML tutacaktır. Başka bir özellik betikleri tutacaktır.

Sonra bunu yapabilirsiniz: Ayrıca

$(document).append(ajaxResponse.html); 
$(document).append(ajaxResponse.script); 

Eğer bunu bir kapatma yaratacak kod çevreleyen hazır fonksiyonu ile komut dosyaları yüklerseniz. Bu kapatma, sayfanın ömrünü uzatır. Sayfayı yenilemeksizin bu script'i her talep ettiğinizde bellek sızıntıları oluşturulacaktır