主题黑客。旋转木马在remove（）灯箱后停止工作

Question

编辑

好的，问题是setTimeout(function(){ ... }, 3000); 似乎会干扰自举轮播功能。我该如何调整其用途以不干扰其余文档？灯箱弹出后，标头轮播和后轮播无法正常运行。

原始帖子

长话短说，这落入了我的腿，这是一个blo肿的预制主题，客户想定制。他们想要一些前端编辑，不能轻易地反向工程它的构建方式，所以用JS定位元素并用我自己的标记替换div。一切正常，除了我创建灯箱时，它似乎会干扰轮播功能，并且停止工作。有什么想法我可能会在这里丢失吗？谢谢

if (document.querySelector(".home")) {

document.querySelector(".nk-header-title").innerHTML = `

<div id="carouselExampleControls" class="carousel slide nk-header-title-sm nk-header-title-parallax-opacity" data-ride="carousel">
    <div class="carousel-inner">


        <div class="carousel-item active" style="background-image: url('./wp-content/images/Wells-Street-Market-Header.jpg')" alt="First slide">
            <div class="overlay"></div>
        </div>

        <div class="carousel-item" style="background-image: url('./wp-content/images/wsm-group.jpg')" alt="Second slide">
            <div class="overlay"></div>

        </div>

        <div class="carousel-item" style="background-image: url('./wp-content/images/wsm-mixology.jpg')" alt="Third slide">
            <div class="overlay"></div>

        </div>

        <div class="carousel-item" style="background-image: url('./wp-content/images/wsm-sidewalk.jpg')" alt="Fourth slide">
            <div class="overlay"></div>
        </div>

        <div class="carousel-item" style="background-image: url('./wp-content/images/wsm-donuts.jpg')" alt="Fifth slide">
            <div class="overlay"></div>
        </div>



    <div class="nk-header-table">
        <div class="nk-header-table-cell">
            <div class="container">
                <h2 class="nk-subtitle" style="color: #ffffff;">205 W. Wacker Dr. Chicago Open M-F 11AM-8PM</h2>

                <h1 class="nk-title display-3" style="color: #ffffff;">WELLS STREET MARKET</h1>

                <div class="nk-gap-2"></div>
                <div style="color: #ffffff;">
                    <div class="nk-gap-4">(See vendors below for specific hours)</div>
                </div>
            </div>
        </div>
    </div>


    </div><!-- /carousel-inner -->





</div><!-- /carouselControls -->


`;
 
    
    document.querySelector(".nk-awb-overlay").innerHTML = `

<div class="nk-awb-overlay" style="background-image: url('./wp-content/images/map_background.png')"></div>

`;
    
    
    
setTimeout(function(){
    
        
document.querySelector(".home").innerHTML += `

<div class="lightbox-container">
  
   <div class="sign-up-container">

   <span onclick="document.querySelector('.lightbox-container').remove()">

<i class="fa fa-times"></i>

</span>


<h3 class="sign_up_text">
Good Eats in your Inbox
</h3>



<img class="sign_up_icons" src="./wp-content/images/sign_up_icons.svg" alt="sign up icons">


<p class="sign_up_text">Sign up for the Wells Street Market newsletter to receive exclusive offers, keep up with events and more.</p>



<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://workwithdomino.us17.list-manage.com/subscribe/post?u=c61f2c9cc665c03dfdef8af98&amp;id=e68bd54a90" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">



<div class="mc-field-group">
	
	<input type="text" value="" placeholder="First Name" name="FNAME" class="mc_form" id="mce-FNAME">
</div>

<div class="mc-field-group">
	
	<input type="text" value="" placeholder="Last Name" name="LNAME" class="mc_form" id="mce-LNAME">
</div>


<div class="mc-field-group">

	<input type="email" value="" placeholder="Email Address" name="EMAIL" class="mc_form required email" id="mce-EMAIL">
</div>


	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>   


<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c61f2c9cc665c03dfdef8af98_e68bd54a90" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe Now" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->


</div>


</div>
`;


}, 3000);