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

Question

Okay, I don't know how else to put this. I have this website here , which its code is down below, and it has basic DOM manipulations using jQuery. I wanted to include a pop-up that retrieves its content from an external ".html" using a jQuery Ajax call (as implemented in the code). However, every time an Ajax call is made, the javascript code begins to misbehave. For instance, the navigation bar automated color change (brown<->transparent) and some elements showing once the user scroll past them, begin to behave in a weird way (not working or working improperly). In other scenarios, even the layout is affected.

Please refer to the end of the page (below the footer) and try the two pop-up triggers and see their effects. I did not know what part of the code to include, so just put most of it.

 $(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

Ok, so figured out where the problem was. I would basically add code into my website through the Ajax call, and that code might have some stylesheet declarations or a different bootstrap version or some malfunctioning *.js file or something and I would just leave it there. So, I figured I have to destroy the added code BEFORE terminating the pop-up.

Here is the fix (the timeout is for animation):

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