कॉलिंग समारोह .load (JQuery) के बाद

Question

एक .load के बाद कॉल करने के लिए एक समारोह हो रही एक छोटे से परेशानी हो रही है:

$(function(){ 
    $('a.pageFetcher').click(function(){ 
     $('#main').load($(this).attr('rel')); 
    }); 
}); 

पृष्ठ लोड है, लेकिन कार्यों आग नहीं है:

$(function(){ 
    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector: '.box', 
    }); 
}); 
$container.infinitescroll({ 
    navSelector : '#page-nav', 
    nextSelector : '#page-nav a', 
    itemSelector : '.box', 
    loading: { 
     finishedMsg: 'Nothing else to load.', 
     img: 'http://i.imgur.com/6RMhx.gif' 
    } 
}, 
function(newElements) { 
    $.superbox.settings = { 
     closeTxt: "Close this", 
     loadTxt: "Loading your selection", 
     nextTxt: "Next item", 
     prevTxt: "Previous item" 
    }; 
    $.superbox(); 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    $newElems.imagesLoaded(function(){ 
     $newElems.animate({ opacity: 1 }); 
     $container.masonry('appended', $newElems, true); 
    }); 
} 
); 
}); 

मैंने उन्हें गठबंधन करने का प्रयास किया है ताकि दूसरे कार्यों को .load के बाद बुलाया जा सके (इस साइट पर कुछ खोज करने और दिए गए उत्तरों/उदाहरणों को देखने के बाद) लेकिन कुछ भी ठीक से काम नहीं करता है।

सुझाव?

Answer 1

.load() खत्म होने के बाद कुछ कोड चलाने के लिए, आपको कोड को .load() के लिए पूर्ण कार्य में रखना होगा। लोड ऑपरेशन एसिंक्रोनस है इसलिए लोड फ़ंक्शन सामग्री की लोडिंग शुरू करता है और फिर तुरंत लौटाता है और आपका जेएस निष्पादन जारी रहता है (लोड पूरा होने से पहले)। इसलिए, यदि आप नई लोड की गई सामग्री पर काम करने की कोशिश कर रहे हैं, तो यह अभी तक नहीं होगा।

जैसा कि आपका कोड अब लिखा गया है, आपके पास कोड के दो ब्लॉक हैं जो मूल HTML दस्तावेज़ तैयार होने पर दोनों चलाते हैं। पहला ब्लॉक .load() ऑपरेशन शुरू करता है। दूसरा ऑपरेशन .load() पहले से ही किया जा सकता है, लेकिन यह अभी तक पूरा नहीं हुआ है, इसलिए .load() ऑपरेशन की सामग्री अभी तक उपलब्ध नहीं है।

यही कारण है कि .load() एक तर्क के रूप में एक पूरा कार्य लेता है। यह एक ऐसा कार्य है जिसे लोड पूरा होने पर बुलाया जाएगा। अधिक जानकारी के लिए the relevant jQuery .load() doc देखें। यहां बताया गया है कि आपका कोड पूर्ण कार्य के साथ कैसा दिखाई देगा।

$(function(){ 
    $('a.pageFetcher').click(function(){ 
     $('#main').load($(this).attr('rel'), function() { 
      // put the code here that you want to run when the .load() 
      // has completed and the content is available 
      // Or, you can call a function from here 
     }); 
     // the .load() operation has not completed here yet 
     // it has just been started 
    }); 
}); 

Answer 2

आपका संदर्भ का पहला बिंदु हमेशा jQuery API होना चाहिए, यहाँ क्या API page on .load() आप मापदंडों लोड समारोह लेता है के बारे में बताता है:

.load (हैंडलर (eventObject))

.load ([eventData], हैंडलर (eventObject))

इस मामले में, आप 01 पास कर रहे हैं eventData रूप, आप के बाद अपने ईवेंट हैंडलर जोड़ सकते हैं ताकि:

$('#main').load($(this).attr('rel'), onNewMainContent); 

कोड के अपने दूसरे खंड में, आप jQuery यह निष्पादित करने के लिए जब अपने शरीर लोड हो जाए, नहीं जब आप अधिक लोड कह रहे हैं आपकी साइट में

function onNewMainContent { // new 
    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.box', 
    // ... 

Answer 3

आप भी बूटस्ट्रैप लोड हो रहा है बटन का उपयोग कर सकते .load() और .load के बाद समारोह() को गति प्रदान करने

एचटीएमएल: आप इसे विशेष रूप से निष्पादित, इसलिए है कि समारोह के शुरू होने से बदलने की जरूरत है

<button type="button" class="btn btn-primary btn-lg" id="refresh" data-loading-text="<i class='fa fa-spinner fa-spin '></i>Processing">Reload Emails</button> 

jQuery

$("#refresh").click(function() { 

    var $this = $(this); 
    $this.button('loading'); 

    $("#container").load("/showemails.aspx?page=1 #container", function() { 
     $("#refresh").button('reset'); 
     }); 

    return false; 
    });