Ajax 调用使 jQuery 代码行为不端并破坏布局

Question

好吧，我不知道该怎么说。我有这个网站here，它的代码在下面，它使用 jQuery 进行基本的 DOM 操作。我想包括一个使用 jQuery Ajax 调用（如代码中实现的那样）从外部“.html”检索其内容的弹出窗口。但是，每次进行 Ajax 调用时，javascript 代码都会开始出现异常。例如，导航栏自动颜色变化（棕色透明）和一些元素在用户滚动过去后显示，开始以一种奇怪的方式表现（不工作或工作不正常）。在其他情况下，甚至布局都会受到影响。

请参阅页面末尾（页脚下方）并尝试两个弹出式触发器并查看它们的效果。 我不知道要包含哪部分代码，所以就放大部分吧。

$(document).ready(function () {

    $('.carousel').carousel({
        interval: 5000
    });

    $('.carousel-fast').carousel({
        interval: 1000
    });

    $(window).on('load', function() {
        headerControl("onload");
        changeText("#right-down", 767, "To the right, you can see a picture of me during the last STEM Model UN!", "If you look down, you can see a picture of me during the last STEM Model UN!");
        
        $('.navbar-toggler').click(function() {
            headerControl("onclick");
        });
        $('.pop-up-call').each(function(i, el){
            $(el).click(function(){
                $.ajax({
                    type: 'GET',
                    url: el.dataset.content,
                    timeout: 5000,
                    success: function(data) {
                        $('#pop-up-content').html(data);
                    },
                    complete: function() {
                        $('#pop-up').removeClass('hidden');
                    }
                });           
            });
        });
        $('#pop-up-close').click(function() {
                $('#pop-up').addClass('hidden');
        });
    });

    $(window).on('resize', function() {
        headerControl("onload");
        changeText("#right-down", 767, "To the right, you can see a picture of me during the last STEM Model UN!", "If you look down, you can see a picture of me during the last STEM Model UN!");
    });

    $(window).on('scroll', function() {
        headerControl("onscroll");
    });
});

function isElementInViewport (el) {

    // Special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    let rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
    );
}

function showElements(check, el) {
    if (isElementInViewport(document.querySelector(check))){
        let elements = document.getElementsByClassName(el);
        for (let i = 0; i < elements.length; i++)
        {
            if (elements[i].classList.contains('visible-mobile')){
                elements[i].classList.toggle('visible-mobile');
                let string = el + '-animate';
                elements[i].classList.toggle(string);
            }
            else {
                break;
            }
        }
    }
}

function changeText(el, wd, lg, sm) {
    let docref = $(el)[0];
    if (window.innerWidth <= wd) {
        docref.innerHTML = sm;
    }
    else {
        docref.innerHTML = lg;
    }
}

function headerControl(n) {
    if (n === "onclick") {
        $('.navbar-bg').toggleClass('hidden');
        $('#ch-pic').removeClass('ch-pic-transit');
        $('#btn-learn-more-content').toggleClass('btn');
        if (window.innerWidth < 991) {
            $('.header-flex').toggleClass('visible-desktop');
        }
        else {
            $('.header-flex').removeClass('hidden');
        }
    }
    else if (n === "onload") {
        let header = $('.workflow-header')[0];
        let img = $('#img-bg')[0]; 
        let header_height = img.clientHeight;
        header.style.height = parseInt(header_height) + "px";
    }
    else if (n === "onscroll") {
        $('.navbar-bg').addClass('hidden');
        $('#navbarSupportedContent').removeClass('show');
        $('.header-flex').removeClass('visible-desktop');
        $('#ch-pic').addClass('ch-pic-transit');
        $('#btn-learn-more-content').addClass('btn');
        let rect = $('#img-bg')[0].getBoundingClientRect();
        if (rect.bottom <= 100)
        {
            $('.navbar').addClass('bg-light-onscroll');
            $('#logo').addClass('logo-small');
        }
        else
        {
            $('.navbar').removeClass('bg-light-onscroll');
            $('#logo').removeClass('logo-small');
        }
    }
}

* {
    box-sizing: border-box;
    font-family: 'PT Sans', sans-serif;
    font-size: 20px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
}

html {
    scroll-behavior: smooth;
}

p {
    font-size: 14px;
    font-weight: 100;
}

thin {
    font-size: inherit;
    font-weight: normal!important;
}

bold {
    font-size: inherit;
    font-weight: bold;
}

old-english {
    font-family: 'engrvrsoldeng_btregular', 'PT Sands', serif;
    font-size: 2rem;
}

/* General */

.animate {
    transition: all 0.5s ease-in-out;
}

.hidden {
    visibility: hidden;
}

.visible-mobile {
    visibility: hidden;
}

.visible-desktop {
    visibility: visible;
}

@media (max-width: 991px) {
    .visible-mobile {
        visibility: unset!important;
    }
    .visible-desktop {
        visibility: hidden;
    }
}

/* Header */

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 700px;  
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.bg-light {
    background-color: transparent!important;
}

.bg-light-onscroll {
    background-color: rgb(97, 68, 56)!important;
}

.bg-size {
    width: auto;
}

.workflow-header {
    width: 100%;
    height: 88vh;
    position: relative;
    min-height: 620px;
    z-index: -1;
}

.navbar-expand-lg .navbar-nav .nav-link {
    color: white;
    opacity: 0.6;
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
    color: #f5f5f5;
    opacity: 1;
}

.navbar-expand-lg .navbar-nav .active .nav-link {
    color: #ffffff;
    opacity: 1;
}

.navbar-light .navbar-toggler {
    background-color: #b69d8c;
    opacity: 0.8;
    clip-path: circle(35%);
}

.navbar-light .navbar-toggler-icon {
    width: 25px;
    margin: 2px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.nav-bar .nav-bar-narrow {
    padding: 5px 15px!important;
}

/* .navbar .nav-item {
    font-size: 10px;
} */

.header-flex {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    color: white;
}

.header-column-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 60px;
}

.header-flex h1 {
    font-size: 28px;
    font-weight: bold;
}

.header-flex h2 {
    font-size: 20px;
}

.ch-pic-transit {
    transition: all 0.5s ease-in-out;
}

#ch-pic {
    margin: 30px 0px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 15px solid rgba(82, 53, 36, 0.64);
}

#ch-pic:hover {
    width: 330px;
    height: 330px;
}

#logo {
    max-height: 45px;
    transition: all 0.5s ease-in-out;
}

.logo-small {
    max-height: 38px!important;
}

/* Pop-ups */
.pop-up ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.pop-up {
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: rgba(32, 32, 32, 0.7);
  width: 100%;
  height: 100%;
  z-index: 1031;
}

.pop-up-window {
  width: 90%;
  height: 90%;
  padding: 15px;
  position: relative;
  overflow-y: scroll;
  scroll-bar-width: 0px;
  border-radius: 15px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  box-shadow: 1px 1px 11px rgba(32, 32, 32, 0.5);
}

.pop-up-close {
  font-family: 'Open Sans', arial, serif;
  font-size: 1.1rem;
  font-weight: bold;
  color: rgb(140, 140, 140);
  float: right;
  cursor: pointer;
}

.pop-up-close {
  display: block;
}

.pop-up-close:hover {
  color: rgb(52, 52, 52);
}

.pop-up-content {
  clear: both;
}

.pop-up-call:hover {
  cursor: pointer;
}

/* sections */

brown {
    color:rgb(148,114,100)!important;
}

.section h1 {
    font-weight: bold!important;
    color: rgb(148,114,100)!important;
}

.section-colored {
    background-color: #f8f8f8;
}

.section-2-holder {
    min-height: 250px;
    height: fit-content;
    padding: 20px;
}

.section-flex {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#section-1 {
    position: relative;
}

#img-books {
    width: 350px;
}

#side-pic {
    width: 100%;
}

@keyframes upscale {
    from {transform: scale(0.1);}
    to {transform: scale(1);}
}

/* Cards */
.card {
    min-height: 200px;
    height: fit-content;
    background-color: white;
    padding: 15px;
    margin: 5px 0px;
    box-shadow: -1px 1px 12px rgba(148,114,100, 0.3);
    transition: all 0.5s ease-in-out;
}

.card-animate {
    transform: scale(0.1);
    animation-name: upscale;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.card:hover {
    box-shadow: 1px 1px 10px rgba(148,114,100, 1.0);
}

/* Carousel */
.container-carousel {
    padding: 30px;
    width: 100%;
}

/* Timeline by Alan Houser */
.timeline {
  border-left: 4px solid rgb(148,114,100);
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;    
  background: fade(white, 3%);
  color: fade(white, 80%);
  font-family: 'PT Sans', sans-serif;;  
  margin: 50px auto;  
  letter-spacing: 0.5px;   
  position: relative;
  line-height: 1.4em;
  font-size: 1.03em;   
  padding: 50px;   
  list-style: none;
  text-align: left;  
  font-weight: 100;  
  max-width: 60%;
}

.timeline-animate {
    animation: fade-in 1s ease-in-out;
}

.event {
    border-bottom: 1px dashed fade(white, 10%);
    padding-bottom: (25px);
    margin-bottom: 50px;  
    position: relative;
}

.event h3 {
    font-size: 1.2rem;
    hyphens: auto;
}

.event:last-of-type { 
      padding-bottom: 0;
      margin-bottom: 0; 
      border: none;      
}

.event::before, .event::after {
      position: absolute;
      display: block;
      top: 0;
}

.event::before {
      left: -193px;    
      color: fade(white, 40%);    
      content: attr(data-date);
      text-align: right;
      font-weight: 100;    
      font-size: 0.7em;
      min-width: 120px;
      font-family: 'PT Sans', sans-serif;;
}

.event::after {
      box-shadow: 0 0 0 4px rgb(148,114,100);    
      left: -57.85px;        
      background: white;    
      border-radius: 50%;  
      height: 11px;
      width: 11px;
      content: "";
      top: 5px;
}

@keyframes fade-in {
    from {
        transform: scale(0.1);
        opacity: 0.0
    }
    to {
        transform: scale(1.0);
        opacity: 1.0
    }
}

/* Footer */

.bg-black {
    background-color: rgb(97, 68, 56);
    min-height: 200px;
    padding: 20px;
}

.footer {
    color: white;
}

.footer h1 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 0;
}

.footer ul {
    margin-top: 10px;
}

.footer li {
    list-style: none;
    display: inline;
    padding: 0px 10px 0px 0px;
}

.footer a {
    color: rgba(255, 255, 255, 0.767);
}

.footer a:hover, .footer a:focus {
    color: white;
}

.footer p {
    display: inline;
}

.icon {
    display: inline;
    font-size: 22px;
}

/* Buttons */
.btn-container {
    position: relative;
    display: inline-block;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    margin-bottom: 15px;
}

.btn {
    display: inline;
    position: relative;
    padding: 0;
}

.btn::before {
  content: attr(data-title);
  display: inline-block;
  padding: 12px 15px;
  border: 0px solid white;
  border-radius: 7px;
  outline: none;
  text-align: center;
  color: rgba(148, 114, 100, 1.0);
  background-color: white;
  box-shadow: 4px 4px 11px 0px rgba(32, 32, 32, 0.5);
  transition: all 0.5s ease-in-out;
}

.btn::after {
  content: attr(data-title);
  padding: 12px 15px;
  position: absolute;
  display: block;
  top: -14px;
  left: 0px;
  border: 0px solid white;
  border-radius: 7px;
  outline: none;
  text-align: center;
  color: white;
  background-color: rgba(148, 114, 100, 1.0);
  clip: rect(0px, 0px, 200px, 0px);
  transition: all 0.5s ease-in-out;
}

.btn:hover:before {
    background-color: rgb(148,114,100);
}

.btn:hover:after {
  clip: rect(0px, 200px, 200px, 0px);
  cursor: pointer;
}


/* RESPONSIVE */

/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/

.side-img {
    position: absolute;
    bottom: -20px;
    left: -50px;
    z-index: -1;
    max-width: 250px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
    .side-img {
        left: -80px;
    }

    #img-books {
        visibility: hidden;
    }
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
    .event h3 {
        font-size: 1.7rem;
    }

    .event::before {
        font-size: 0.9em;
    }
 
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    .container-carousel {
        padding: 50px;
        width: 100%;
    }
}
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    .side-img {
        left: -20px; 
        z-index: -1!important; 
    }

    #img-books {
        visibility: visible;
    }
}

/* Mobiles and Tablets only */

@media (max-width: 991px) {

    h1 {
        font-size: 2rem;
    }

    .timeline {
        max-width: 30%;
    }

    .side-img {
        left: -20px; 
        z-index: unset!important; 
    }

    .workflow-header {
        min-height: 610px;
        height: 100vh;
    }

    .navbar-collapse {
        position: absolute;
        top: 75px;
        right: 0;
        width: 140px;
        margin: 30px;
        text-align: right;
    }

    .navbar-bg {
        background-color: #2b1813;
        position: absolute;
        right: 0;
        top: 0;
        height: 100vh;
        width: 190px;
        opacity: 0.8;
        animation: slide-in 2s forwards;
    }

    .header-flex h1 {
        font-size: 20px;
    }
    
    .header-flex h2 {
        font-size: 16px;
    }

    #ch-pic {
        width: 220px;
        height: 220px;
    }

    #ch-pic:hover {
        width: 250px;
        height: 250px;
    }

    @keyframes slide-in {
        from {width: 0px;}
        to {width: 190px;}
    }
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Omar Ibrahim</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="images/icon.png">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,800;1,800&display=swap" rel="stylesheet">
        <link href="fonts/engraves/stylesheet.css" rel="stylesheet">
        <link href="fonts/engraves/specimen_files/specimen_stylesheet.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="css/owl.carousel.min.css">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <div id="pop-up" class="pop-up hidden">
            <div class="pop-up-window">
                <div id="pop-up-close" class="pop-up-close">✕</div>
                <div id="pop-up-content" class="pop-up-content">
                </div>
            </div>
        </div>
        <header id="section-0">
            <div class="bg">
                <img src="images/bg.jpg" alt="picture of library" class="bg-size" id="img-bg">
            </div>
            <nav class="navbar nav-bar-narrow navbar-expand-lg navbar-light fixed-top bg-light animate" style="padding: 5px 15px;">
                <a class="navbar-brand" href="index.html">
                    <img src="images/logo-sm-wh.png" alt="Logo" id="logo">
                </a>
                <div class="navbar-bg hidden"></div>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                      <li class="nav-item active">
                        <a class="nav-link" href="#section-0">Home<span class="sr-only">(current)</span></a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="writing.html">Creative Writing</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="arts.html">Graphic Design</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="code.html">Programming</a>
                      </li>
                    </ul>
                </div>
            </nav>
            <div class="header-flex">
                <div class="header-column-flex">
                    <img src="images/pic.jpg" alt="picture of Omar" id="ch-pic" class="ch-pic-transit">
                    <h1>Omar Ibrahim</h1>
                    <h2>Creative Writer | Developer | Graphic Designer</h2>
                    <a href="#section-1"><div class="btn-container" id="btn-learn-more">
                        <div class="btn" id="btn-learn-more-content" data-title="Discover Omar!"></div>
                    </div></a>
                </div>
            </div>
        </header>
        <div class="workflow-header" id="workflow-header"></div>
        <div id="section-1" class="section container-fluid section-1">
            <div class="container my-3 p-3">
                <div class="row">
                    <div class="col-md-6">
                        <h1 id="section-1-nav">Wel<thin>come!</thin></h1>
                        <p>I am Omar Ibrahim, or you can just call me Adam, and I am a poet, computer science enthusiast/developer, and a graphic artists. I am also a debater/public speaker and have enjoyed a while exploring entrepreneurship and international politics. I aspire to work in the field of education where I can implement computer science in the expansion of educational opportunities, especially in literature. Currently, I study a STEM-focused Honors curriculum at STEM High School for Boys - 6th of October with an unweighted GPA of 4.0, highest (and only) composite ACT score of 35, and a total TOEFL score of 118.</p>
                        <p>I aspire to pursue higher education in the United States, somewhere that allows me to reach out to unexplored domains of knowledge and supports my desires to learn and discover new fields.</p>
                        <p id="right-down">To the right, you can see a picture of me during the last STEM Model UN!</p> 
                        <div class="container-fluid">
                            <div class="row">
                                <div class="d-flex justify-content-start" style="padding: 0px 15px 0 0;">
                                    <a href="files/resume.pdf" target="_blank"><div class="btn-container" id="btn-cv">
                                        <div class="btn" data-title="Download Résumé"></div>
                                    </div></a>
                                </div>
                                <div class="d-flex justify-content-between" style="padding: 0 15px 0 0;">
                                    <a href="#section-3"><div class="btn-container" id="btn-highlights">
                                        <div class="btn" data-title="Highlights"></div>
                                    </div></a>
                                </div>
                                <div class="d-flex justify-content-end" style="padding: 0 15px 0 0;">
                                    <a href="#section-4"><div class="btn-container" id="btn-gallery">
                                        <div class="btn" data-title="Gallery"></div>
                                    </div></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <img src="images/pic-2.JPG" id="side-pic">
                    </div>
                </div>
            </div>
            <div class="side-img">
                <img src="images/books.png" id="img-books">
            </div>
        </div>
        <div id="section-2" class="section section-colored container-fluid my-3 p-3">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-2-holder">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="card visible-mobile">
                                    <div class="section-flex">
                                        <brown>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="68" height="68" fill="currentColor" class="bi bi-blockquote-left" viewBox="0 0 16 16">
                                            <path fill-rule="evenodd" d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm5 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                                            <path d="M3.734 6.352a6.586 6.586 0 0 0-.445.275 1.94 1.94 0 0 0-.346.299 1.38 1.38 0 0 0-.252.369c-.058.129-.1.295-.123.498h.282c.242 0 .431.06.568.182.14.117.21.29.21.521a.697.697 0 0 1-.187.463c-.12.14-.289.21-.503.21-.336 0-.577-.108-.721-.327C2.072 8.619 2 8.328 2 7.969c0-.254.055-.485.164-.692.11-.21.242-.398.398-.562.16-.168.33-.31.51-.428.18-.117.33-.213.451-.287l.211.352zm2.168 0a6.588 6.588 0 0 0-.445.275 1.94 1.94 0 0 0-.346.299c-.113.12-.199.246-.257.375a1.75 1.75 0 0 0-.118.492h.282c.242 0 .431.06.568.182.14.117.21.29.21.521a.697.697 0 0 1-.187.463c-.12.14-.289.21-.504.21-.335 0-.576-.108-.72-.327-.145-.223-.217-.514-.217-.873 0-.254.055-.485.164-.692.11-.21.242-.398.398-.562.16-.168.33-.31.51-.428.18-.117.33-.213.451-.287l.211.352z"/>
                                            </svg>
                                        </brown>
                                        <brown><h5>Creative Writer</h5></brown>
                                            <p style="text-align: center;">Poet and prose writer of 4+ years, Between the Lines: Peace and Writing Experience '20 Alumnus, Aster Literature Magazine Board Member, and TEDxYouth speaker</p>
                                            <a href="/writing.html"><div class="btn-container" id="btn-creative-writing">
                                                <div class="btn" id="btn-creative-writing-content" data-title="Read Pieces"></div>
                                            </div></a>
                                    </div>
                                </div>
                            </div>
        <div class="pop-up-call" data-content="https://omargfh.github.io/Omar-Ibrahim-personal-website/index%20(2).html">Call Pop Up</div>
<div class="pop-up-call" data-content="https://omargfh.github.io/Omar-Ibrahim-personal-website/nojs.html">Call Pop Up 2</div>
        <!-- jQuery (Bootstrap JS plugins depend on it) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="js/ajax-utils.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="js/owl.carousel.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

Answer 1

好的，所以找出问题所在。我基本上会通过 Ajax 调用将代码添加到我的网站中，并且该代码可能有一些样式表声明或不同的引导版本或一些故障 *.js 文件或其他东西，我会把它留在那里。所以，我想我必须在终止弹出窗口之前销毁添加的代码。

这里是修复（超时用于动画）：

$('#pop-up-close').click(function() {
    setTimeout(() =>{
            $('#pop-up-content').html("");
            $('#pop-up').addClass('hidden');
    }, 1200);
});