ajax在关闭一次后没有重新打开

Question

我使用 ajax 和 wordpress 来打开帖子作为模式。它不是 php 问题，而是 jquery，所以我在这里问。 模态是 display:none 作为默认值。当您单击 wordpress 链接模式时，会打开（显示：块）并加载帖子。这行得通。然后，当您单击关闭按钮时，模态将再次显示：无。这按预期工作。 问题是当我尝试重新打开链接或任何其他帖子链接时，没有任何反应，只显示覆盖（覆盖 div 在模态后面）。没有加载模式或链接的 html。模态甚至没有显示为空白。

jquery

jQuery(document).ready(function ($) {

            $.ajaxSetup({cache: false});

            var post_link = $(".post-link").attr("href");

            $(".post-link").click(function () {
                $(".ajax-cont").addClass("ajax-popup-show");
                $("#single-post-container").addClass("ajax-popup-show").html("Molimo Pričekajte");
                $("#single-post-container").load(post_link);
                $(".ovrly").fadeIn(100);
                return false;
            });

            $(".ajax-close").click(function () {
                $(".ajax-cont").empty().addClass("ajax-popup-hide");
                $("#single-post-container").empty().addClass("ajax-popup-hide");
                $(".ovrly").fadeOut(100);
            });

        });

CSS

.ajax-cont {
    position: absolute;
    width: 75%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 999;
    height: auto;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    top: 10%;
    display: none;
    left: 50%;
}

.prodaja-cont {
    position: absolute;
    width: 40%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 999;
    height: auto;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    top: 10%;
    display: none;
    left: 50%;
}

.ajax-popup {
    width: 100%;
    padding: 30px;
    background: #fff;
}

.ajax-close {
    position: absolute;
    right: 30px;
    top: 0;
    cursor: pointer;
    z-index: 9999;
    width: 10px;
    height: 10px;
}

.ajax-close:before {
    content: "\f404";
    font-family: "Ionicons";
    font-size: 3em;
}

.ajax-popup-show {
    display: block;
}

.ajax-popup-hide {
    display: none;
}

.ovrly {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    /*dim the background*/
    display: none;
}

HTML/PHP

<div class="ovrly"></div>
    <div class="ajax-cont">
        <div class="ajax-popup" id="single-post-container"></div>
        <div class="ajax-close"></div>
    </div>

<a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

Answer 1

我认为当$(".ajax-cont").empty()被执行时，它的所有内容都会被移除，包括

<div class="ajax-popup" id="single-post-container"</div>
<div class="ajax-close"></div>

尝试将关闭处理程序的第一行更改为 $(".ajax-cont").addClass("ajax-popup-hide") 删除empty()

您第二次点击该链接时，没有任何#single-post-container 放置您的内容。

您还应该从.ajax-cont 和#single-post-container 中删除类ajax-popup-hide

$(".post-link").click(function () {
  $(".ajax-cont").addClass("ajax-popup-show").removeClass("ajax-popup-hide");
  $("#single-post-container").addClass("ajax-popup-show").removeClass("ajax-popup-hide").html("Molimo Pričekajte");
  $("#single-post-container").load(post_link);
  $(".ovrly").fadeIn(100);
  return false;
});

$(".ajax-close").click(function () {
  $(".ajax-cont").addClass("ajax-popup-hide");
  $("#single-post-container").empty().addClass("ajax-popup-hide");
  $(".ovrly").fadeOut(100);
});