ajax关闭一次后才重新开放

Question

Im using ajax with wordpress to open post's as a modal. Its not a php problem but jquery so im asking here. Modal is display:none as default. When you click on a wordpress link modal opens (display:block) and loads a post. This works. Then when you click on close button, modal goes to display:none again. This works as expected. The problem is when i try to re-open the link, or any other post link, nothing happens, only overlay (overlay div is behind modal for effect) is showed. No modal or link's html is loaded. The modal is not even shown as blank.

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

I think that when $(".ajax-cont").empty() is executed, all its content is removed, including

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

Try changing first line of close handler to $(".ajax-cont").addClass("ajax-popup-hide") removing the empty()

The second time you click on the link, there isn't any #single-post-container where put you content.

You should also remove class ajax-popup-hide from both .ajax-cont and #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);
});