スクリプトを実行する前に外部HTMLを確実に読み込む

Question

2日間すべての関連記事を検索しても成功しません。 私のコードは、ローカルストレージを使用して、ページが更新されたときにチェックボックスの状態を保存および取得します。これはうまくいく。私は以来、外部のHTMLファイルからdivにチェックボックスをロードするために私のコードを拡張し、これはタイミングの問題を引き起こしている。ローカルストレージを管理するコードが実行されすぎて、チェックボックスがdivにロードされません。コードを遅らせるための多くの努力は失敗しました。私の最近の努力は意図された効果を持たない「setTimeout」です（フィドル参照）。ちなみに、コードを止めるのに十分な「アラート」があれば、私はこれがすべて動作することが証明されています。最善の方法で私を助けてください。とても有難い。 https://jsfiddle.net/Ldn2awxb/

https://code.jquery.com/jquery-2.2.3.min.js 


<div id="CountryCheckboxContainer"> 

<!--  Checkboxes below are loaded from external HTML file 

    <label><input type="checkbox" id="UN8" value="Albania" />Albania</label> 
    <label><input type="checkbox" id="UN40" value="Austria" />Austria</label> 
    <label><input type="checkbox" id="UN100" value="Bulgaria" />Bulgaria</label> 
--> 
</div> 




// Load from external files 
function LoadCheckboxes() { 
setTimeout(function() 
    { $("#CountryCheckboxContainer").load("https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0"); 
    }, 500); 
} 


// set and get items 
$(function() { 

LoadCheckboxes(); 

    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {}, 
    $checkboxes = $("#CountryCheckboxContainer :checkbox"); 

    $checkboxes.on("change", function() { 
    $checkboxes.each(function() { 
     checkboxValues[this.id] = this.checked; 
    }); 
    localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues)); 
    }); 

    // On page load 
    $.each(checkboxValues, function(key, value) { 
    $("#" + key).prop('checked', value); 
    }); 
}); 

Answer 1

.load()正常に完了したと呼ばれていますコールバック関数を供給するためのオプションを提供します。むしろ​​の一部として、セットアップを行い、あなたのセットアップの一部として​​を使用するよりも：

$(function(){ 
    function setupCheckboxes(){ 
    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {}, 
    $checkboxes = $("#CountryCheckboxContainer :checkbox"); 

    $checkboxes.on("change", function() { 
     $checkboxes.each(function() { 
     checkboxValues[this.id] = this.checked; 
     }); 
     localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues)); 
    }); 

    $.each(checkboxValues, function(key, value) { 
     $("#" + key).prop('checked', value); 
    }); 
    }; 

    $("#CountryCheckboxContainer").load("https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0", setupCheckboxes); 
}); 

Answer 2

私は最善の方法は、あなたのコンテンツをロードして、バインディングを呼んだと思います。このように：

$.ajax({ 
    url: 'https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0', 
    success: function(content){ 
    $("#CountryCheckboxContainer").html(content); 
    //Put your behaviors here. 
    } 
}) 

この方法でコードを同期的に実行することもできます。このような何か：あなたは、このようなGoogleの分析やブートストラップとして、実行されているもう一つの重要なJSのコンテンツがある場合

$.ajax({ 
    url: 'https://c2ect538.caspio.com/dp.asp?AppKey=b8a94000b0cf30c15313458e91a0', 
    async: false, //It makes stops JS execution in the page, 
    success: function(content){ 
    $("#CountryCheckboxContainer").html(content); 
    } 
}) 
//And just keep your normal code. 

は、それが最初のオプションをやって問題と本当に多くの方が良いつもりです。