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

尝试委托事件.. 绑定事件时，DOM 中的元素似乎尚不可用

代替

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

和

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

staticContainer 是绑定事件时已经在您的 DOM 中的元素，并且是country

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