Ajax 调用使 jQuery 代码行为不端并破坏布局
Posted
技术标签:
【中文标题】Ajax 调用使 jQuery 代码行为不端并破坏布局【英文标题】：Ajax Calls makes jQuery code misbehave and breaks layout 【发布时间】：2021-04-01 03:54:07 【问题描述】：好吧，我不知道该怎么说。我有这个网站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" 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" 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" 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" 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>【问题讨论】：
嗨，这是很多代码。你能把它修整一下，以便创建一个minimal reproducible example 吗？ @Nicolas 我已为此目的链接了该网站（托管在 GitHub 页面上）。几乎所有地方的代码块都存在问题，所以这就是为什么我不知道要包括哪些部分。但是，我确保只保留相关的 HTML，并且没有太多的 JS 开始。 【参考方案1】：好的，所以找出问题所在。我基本上会通过 Ajax 调用将代码添加到我的网站中，并且该代码可能有一些样式表声明或不同的引导版本或一些故障 *.js 文件或其他东西，我会把它留在那里。所以，我想我必须在终止弹出窗口之前销毁添加的代码。
这里是修复（超时用于动画）：
$('#pop-up-close').click(function()
setTimeout(() =>
$('#pop-up-content').html("");
$('#pop-up').addClass('hidden');
, 1200);
);
【讨论】：
以上是关于Ajax 调用使 jQuery 代码行为不端并破坏布局的主要内容，如果未能解决你的问题，请参考以下文章
结构-行为-样式-Jquery实现延迟加载特效（数据缓冲特效）