javascript - Jquery シンプルな ajax - HTML の挿入

Question

div が開かれたら、ajax 経由で html コンテンツをロードしたいと思います。これは私が働いているコードです：

http://jsfiddle.net/uhEgG/2/

$(document).ready(function () {


    $('#country').click(function () {
        $("#country_slide").slideToggle();
    });

    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });

});

私が必要だと思うコードはこれです：

    $.ajaxSetup ({  
        cache: false  
    });  
    var ajax_load = "Loading...";
    var loadUrl = "www.test.com/site.html";  
    $("#load_basic").click(function(){  
        $("#country_slide").html(ajax_load).load(loadUrl);  
    })

上記のコードでdivが開かれたときに読み込まれるようにするにはどうすればよいですか? divが開いているかどうか。

Answer 1

スライドの状態を変数に保存するか、次のようにデータ属性に保存します。

<div id="country_slide" data-state="1">

そして、このようなものを作ります:

$('#country').click(function () {
        $("#country_slide").slideToggle();
        if ($("#country_slide").attr("data-state") == 0)
            $("#country_slide").html(ajax_load).load(loadUrl); 
    });

Answer 2

イベントを委任してみてください..イベントがバインドされているとき、要素はDOMでまだ利用できないようです

交換

$('#country').click(function () {

と

$(staticContainer).on('click', '#country', function () {

staticContainer は、イベントがバインドされたときにすでに DOM にある要素であり、の祖先ですcountry

Answer 3

上記のコードでdivが開かれたときに読み込まれるようにする

$("#country_slide").slideToggle(function(){
  if($(this).is(':visible')){
    $("#country_slide").html(ajax_load).load(loadUrl);
  }
});