Question

我在wordpress网站上用ajax加载我的内容：

<script>
   $(document).ready(function(){
        $.ajaxSetup({cache:false});
        $(".post-link").click(function(){
            var post_link = $(this).attr("href");

        $("#single-post-container").show().html("content loading");
        $("#single-post-container").load(post_link);
        return false;
        });

    });
</script>

这很好用，但是当我尝试向按钮添加一个函数来关闭这个DIV时没有任何反应：

<script>
    $("#hide").click(function(){
        $("#single-post-container").hide();
    });
</script>

所以首先我做“显示”，之后我想用“隐藏”关闭它，但它不起作用，无论按钮是在ajax加载的DIV内部还是外部。

Answer 1

您尚未发布HTML，但以下内容必须适用：

ID为single-post-container的内容必须在页面加载时存在且只有一个（唯一ID）
ID为hide的内容必须在页面加载时存在且只有其中一个
按钮必须为type="button"，否则会尝试将页面提交给自己

如果为1但不是2，并且hide已加载到您需要的容器中

$(function(){
  $.ajaxSetup({cache:false});
  $(".post-link").on("click",function(e){
    e.preventDefault();
    var post_link = $(this).attr("href");
    $("#single-post-container").show().html("content loading");
    $("#single-post-container").load(post_link);
  });
  $("#single-post-container").on("click","#hide",function(){
    $("#single-post-container").hide();
  });
});

如果1 AND 2和hide在容器外：

$(function(){
  $.ajaxSetup({cache:false});
  $(".post-link").click(function(e){
    e.preventDefault();
    var post_link = $(this).attr("href");
    $("#single-post-container").show().html("content loading");
    $("#single-post-container").load(post_link);
  });
  $("#hide").on("click",function(){
    $("#single-post-container").hide();
  });
});

Onclick关闭装有ajax的DIV

1 个答案: