ajax关闭一次后不重新打开

Question

我使用ajax与wordpress一起打开post作为一种模式。这不是php问题，而是jquery，所以我在这里问。模式是显示:无作为默认。当您单击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-popup-hide从.ajax-cont和#single-post-container中删除。

$(".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);
});