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

尝试委托事件 ..看起来绑定事件时DOm中尚未提供该元素

更换

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

同

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

staticContainer是绑定事件和country的祖先时已经在DOM中的元素

Answer 2

通过上面的代码打开div时使其加载

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

Answer 3

将幻灯片状态存储在变量或数据属性中：

<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); 
    });