加载HTML内容如果不存在JQuery AJAX

如何解决加载HTML内容如果不存在JQuery AJAX

| 我有一个带有3个按钮的页面。 >徽标>横幅>脚 当这三个按钮中的任何一个被单击时，它都会将jquery发布到一个页面，该页面作为响应返回HTML内容，我根据返回的内容设置div的innerhtml。我要这样做，以便如果单击“徽标”，然后转到“横幅”再返回“徽标”，则不应再次请求内容，因为第一次单击该内容时已加载。 谢谢 。     

解决方法

尝试这个： HTML：

<a href=\"#\" class=\"menu\" data=\"logos\" type=\"hidde-class\">logos</a><br />
<a href=\"#\" class=\"menu\" data=\"banner\" type=\"remover-class\">banner</a><br />
<a href=\"#\" class=\"menu\" data=\"footer\" type=\"remover-class\">footer</a><br />

<div id=\"container\"></div>

JS：

$(\".menu\").bind(\"click\",function(event) {

    event.stopPropagation();

    var 
       data = $(this).attr(\"data\");
       type = $(this).attr(\"type\");

    if ($(\"#container\").find(\".logos\").length > 0 && data == \"logos\") {
        $(\"#container\").find(\".logos\").show();
        return false; 
    }

    var htmlappend = $(\"<div></div>\")
                          .addClass(type)
                          .addClass(data);

    $(\"#container\").find(\".remover-class\").remove();
    $(\"#container\").find(\".hidde-class\").hide();

    $(\"#container\").append(htmlappend);

    $(\"#container\").find(\".\" + data).load(\"file_\" + data + \"_.html\");

    return false;

});

    ,听起来像是ѭ2的完美候选人

$(\".someItem\").one(\"click\",function(){
  //do your post and load the html
});

使用1将允许事件处理程序为每个元素触发一次。     ,在点击处理程序的逻辑中，查找已加载的内容。一种方法是查看是否可以找到内容随附的特定元素。 另一个方法是使用单击处理程序在元素上设置数据属性，然后查找该属性的值。 例如：

$(\".myElements\").click(function() {
        if ($(this).attr(\"data-loaded\") == false {
            // TODO: Do ajax load

            // Flag the elements so we don\'t load again
            $(\".myElements\").attr(\"data-loaded\",true);
        }
    });

将状态存储在data-属性中的好处是您不必使用全局变量，并且数据存储在DOM中，而不仅仅是在javascript中。如果您有动态页面，也可以使用它来控制服务器HTML输出的脚本行为。     ,我将取消绑定click事件，以防止进一步的加载请求

$(\'#button\').click(function(e) {
    e.preventDefault();
    $(\'#button\').unbind(\'click\');
    $(\'#result\').load(\'ajax/test.html \' + \'someid\',function() {
      //load callback
    });
});

或使用one.click比这更好的答案:)     ,您可以将返回的html转储到变量中，然后在执行另一个ajax调用之前检查变量是否为is6ѭ。

var logos = null;
var banners = null;
var footer = null;

$(\".logos\").click(function(){
    if (logos == null) // do ajax and save to logos variable
    else $(\"div\").html(logos)
});

    ,马克钉它。one（）将节省额外的代码行和许多检查麻烦。我在类似的情况下使用它。我强烈建议将它们包装在父容器中的一种优化方法是：

$(\'#id_of_parent_container\').find(\'button\').one(\"click\",function () {
    //get the id of the button that was clicked and do the ajax load accordingly
});