获取document.ready函数注意到的附加值

Question

当页面已经呈现时，document.ready函数是否有办法注意追加函数？

下面是document.ready函数以及代码段。尝试了一些不同的东西，例如window.onload，但仍无法修复

jQuery(document).ready(function() {
    
           var index = 1;
           var testNum =1;
           var slideLen = $('.slide-container').length;
           $('.slide-thumb').click(function (event) {
              var slideNum = $(this).attr('data-slide');
              var el = $('.slide-container[data-slide=' + slideNum + ']');
              index = slideNum;
    
              $(el).addClass('show-slide');
              $(el).siblings('.slide-container').removeClass('show-slide');
              $(this).siblings('.slide-thumb').removeClass('show-slide-thumb');
              $(this).addClass('show-slide-thumb');
    
       
    
         });
    
        function autoSlide() {
            timer = setInterval(function () {
    
                if (index >= slideLen) {
                    index = 0;
                }
                $('.slide-thumb[data-slide=' + ++index + ']').click();
                testNum++;
    
            }, 6000);
        }
    
        autoSlide();
        });


 function showDetails(elementID) {
       $('.details-container').addClass('show');
    
       $('.top-section').append(
         '<span id="car_name" style="font-size:2em">' + obj[0].make + '</span>'        +
         '<span id="car_price" style="float:right;font-size:2em;font-weight: bold;color:#23F4ED;" >' + '¢' + obj[0].price + '</span>'
    );
    
         $('.slide').find('.slide-container').remove();
         $('.slide').append
         (
            '<li class="slide-container show-slide" id="sl" data-slide="1"><div class="slide-image" style=" background:url(' + obj[0].image + '); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>'
            +
            '<li class="slide-container" data-slide="2"><div class="slide-image" style=" background:url('+obj[0].image2+'); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>'
        
    );
         $('.thumbs').find('.slide-thumb').remove();
         $('.thumbs').append
          (
            '<li class="slide-thumb show-slide-thumb" id="hit" data-slide="1"><a ><img src="img/car1.jpg" /></a></li>' 
            +
            '<li class="slide-thumb" id="hit" data-slide="2"><a ><img src="img/car1.jpg" /></a></li>'
        
        );
    }

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
    font-weight: 300;
    -webkit-font-smoothing: antialiased
}
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
p {
    margin-bottom: 20px;
    line-height: 2;
    font-size: 1rem;
    font-weight: 300;
}
html {
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
*,
*:before,
*:after {
    box-sizing: inherit
}
body {
    width: 100vw;
    font-family: 'open sans', sans-serif;
    font-size: 100%;
    font-weight: 300;
    color: #212121;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

header {
    width:inherit;
}



.menu-bar{
height:70px;
width:100%;
background: #02243E;
}
.menu-bar .section-container{
padding: 0px;
display: table;
}
.logo-container{
display: inline-block;
vertical-align: top;
    height: 70px;
}
.logo-container h1{
    margin-top: 20px;
color: #40C2F1;

}
.menu-container{
    float: right;
display: inline-block;
    height: 70px;
    }
.menu{
    width: inherit;
    height: inherit;
    vertical-align: middle;
    display: table-cell;

}
.logo{
    display: flex;
    height:55px;
    font-size: 1.5rem;
    justify-content: flex-start;
}

.menu ul{
display: flex;
  justify-content: flex-end;
  color: #40C2F1;
  list-style-type: none;

} 
.menu-item{
    margin-left: 40px;
}

.banner-wrap{
height:50vh;
background: #D6D6D6;
width: inherit;
}

.section-title{
width:100%;
text-align: center;
margin-bottom:25px;
color: 

}
.mini-section-title{
width:100%;
text-align: center;
margin-bottom:25px;

}
.content-text{
    color:#95989A;
    padding: 0px 25px;
}
.section-container{
    padding:50px 0px;
    width: 90vw;
    max-width: 1250px;
    margin: 0 auto;
    height:inherit;
}
.content-area{
    vertical-align: top;
    width: 75%;
    display: inline-block;
    height: auto;
}
.side-content{
        width: 24%;
    height: auto;
    display: inline-block;
}

.welcome-section{
height:auto;

}
.welcome-section .section-title{

color: #40C2F1;

}
.categories-section{
height:auto;
border: 1px solid #C9CACA;
background: #F8FAFC;
}

.categories-section .mini-section-title{
color: #3F3F3F;
}


.contact-section{
height:300px;
width: inherit;
background: #40C2F1;
display: table;
}

.contact-section .innerwrap{
    color:white;
    text-align: center;
display: table-cell;
vertical-align: middle;

}
.submit-button{
    width:auto;
    padding:20px 40px;
    color:white;
    border:none;
    border-radius:5px; 
    background:#23F4ED;
}
.category-wrap{
    width: auto;
}
.category-card{
   cursor: pointer;
    margin: 25px 10px;
    display: inline-block;
    border-radius: 5px;
    width: 27vw;
    max-width: 393px;
    height: 25vw;
    max-height: 393px;
    background: #fff;
    border:1px solid #C9CACA;
    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;
}
.cat-icon-wrap{
display:table;
width: 100%;
height:75%;
border-bottom: 1px solid #C9CACA;
}

.cat-icon{
display:table-cell;
vertical-align: middle;

}

.cat-img{
margin:0 auto;
width:45%;
height:56.25%;
background: black;
}
.cat-description{
    display: table;
    width: 100%;
    height:24%;
}
.cat-text{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #40C2F1;
}


.line{
height: 1px;
width: 100%;
background: #95989A;
}
.footer-top{
 width: 100%;
height: auto;
}
.social-icons{

color: #40C2F1;
text-align: right;

}
.sitemap{
color:  #40C2F1;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.footer-content{
    width: 100%
}
.footer-bottom{
padding:20px 0px;
color: #40C2F1;
width: 100%;

}
.foot-link{
margin-bottom:15px;
}

.footer-icon{
 font-size: 2.5rem;
 margin-left:5px;
 display: inline-block;
 width: auto;
}
.base-left{
 text-align: left;
 float: right;
}
.base-right{
 text-align: right;
}

.footer-column{
    vertical-align: top;
    width: 24.5%;
display: inline-block;
height:200px;
}
.search-banner{
height:auto;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}
.search-field-wrap{
 height: auto;
 width: 100%;
 margin: 50px 0px;   
}
.combobox{
border-radius: 5px;
height:40px;
width: 15vw;
padding: 5px;
text-align: center;
border:1px solid #C9CACA;
display: inline-block;
margin: 0px 10px 0px 10px;

    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;
}
.button-wrap{
    width: 100%;
    text-align: center;
}

.image-card{
    cursor: pointer;
    margin: 0px 10px 25px 0px;
    display: inline-block;
    border-radius: 5px;
    width: 20vw;
    height: 25vw;
    max-width: 295px;
    max-height: 320px;
    background: #fff;
    border: 1px solid #C9CACA;
    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;
}


.card-wrap{
display:table;
width: 100%;
height:65%;
border-bottom: 1px solid #C9CACA;
}

.card-icon{
width:100%;
height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 5px 5px 0px 0px;
}

.card-img{
margin:0 auto;
width:45%;
height:56.25%;
background: black;
}
.card-description{ 
    width: 100%;
    height: 35%;
}
.card-text{
    display: inline-block;
    text-align: center;
    width: 49%;
    height:100%;
    color: #40C2F1;
}
.card-text-wrapper{
    display: table;
    width:100%;
        height: 100%;
    text-align: center
}
.vehicle-details{
    margin-bottom: 2px;
    line-height: 1.2;
    font-size: 0.7rem;
}

.vehicle-name{
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 5px;
}

.card-details{
    padding-left: 15px;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}
.price-tag{
    display: table-cell;
    vertical-align: middle;
    font-size: 1.5rem;
    font-family: 'lato', -serif;
    font-weight: 700;
    color: #23F4ED;
}
.ad-images{
    width: 100%;
    margin-bottom: 25px;
}
.top-section{
height:250px;
width: 100%;

}
.details-container{
position:fixed;
 margin: 0;
padding-top: 10%;
  padding-bottom: 10%;
width:100%;
opacity: 0;
height:100%;
background: rgba(2,36,62,0.3);
z-index: 1000;
transition:all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
visibility: hidden;
 /* Safari */
}

.show{
  visibility: visible;
  opacity: 1;



}

.details-card{
   display: block;
  margin: auto;
  padding:15px 11px;
  padding-top:;
height: auto;
width: 800px;
background: white;
border-radius: 5px;
    border:1px solid #C9CACA;
    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;

}
.details-card-header{
    height: 40px; 
}
.close-button{
  cursor: pointer;
  color: #C9CACA;
  font-size: 1.5em;
  font-weight: bolder;
  float: right;
  background: none;
  border: none;
}
.details-card-content{
/*height: 90%;*/
height: 500px;
overflow-y: scroll;
padding: 11px;
}

/*.details-card{*/
    /*height: 900px;*/
    /*overflow-y: scroll;*/
    /*padding: 11px;*/
/*}*/

.details-card-content::-webkit-scrollbar {
width:8px;
 background: white;

}
.details-card-content::-webkit-scrollbar-track {
  width: 15px;
}
.details-card-content::-webkit-scrollbar-thumb {
border-radius: 5px;
 background: #C9CACA;
}

.slider-card{
    margin: 0px 10px 25px 0px;
    width: 100%;
    max-width: 900px;
    height:425px;

    background: #fff;
    border:1px solid #C9CACA;
    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;
  margin-top: -150px;
}


.car-details-card{
    margin: 0px 10px 25px 0px;
    border-radius: 5px;
     display:inline-block;
    width: 470px;
    height:40vh;
    max-height: 300px;
    background: #fff;
    border:1px solid #C9CACA;
    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;
}
.contact-card{
    vertical-align: top;
    margin: 0px;
    display:inline-block;
    border-radius: 5px;
    width: 262px;
    height:25vw;
    max-height: 300px;
    background: #fff;
    border:1px solid #C9CACA;
    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;


}
.slide {
  overflow: hidden;
  /*border: 4px solid #E74C3C;*/
 /* border: 4px solid #3498DB;*/
}
.slide-container{
 opacity:0;
   transition: all 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);

}
.show-slide{
  opacity:1;
}

.slide-thumb {
  opacity: 0.5;
}

.show-slide-thumb {
  opacity: 1;
}

.slide, .slide li, .slide-image {
  width: 100%;
  height: 350px;
  position: relative;
   border-bottom:1px solid #C9CACA;
  margin-top: -8px;
    padding: 0px;


}

.slide li {
  position: absolute;
  z-index: 50;

}

/*Animation For Slider*/
@-webkit-keyframes 
slider {  0% {
left: -500px;
}
 100% {
left: 0;
}
}

.slide li:target {
  z-index: 100;
  -webkit-animation: slider 1s 1;
}

/*Not Target*/
@-webkit-keyframes 
noTarget {  0% {
z-index: 75;
}
 100% {
z-index: 75;
}
}

.slide li:not(:target) { -webkit-animation: noTarget 1s 1; }
.thumbs {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
      padding: 0px;
}

.thumbs li, .thumbs li a {
  width: 98px;
  height: 55px;
}
.thumbs li{
    list-style-type: none;
}

.thumbs a {
  /*display: block;*/
  position: relative;
  font: bold 12px/25px Arial, sans-serif;
  color: #515151;
  text-decoration: none;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.25), inset 1px 1px 0px rgba(0, 0, 0, 0.15);
}

.thumbs li a img {
  width: 90px;
  height: 45px;
border:1px solid #C9CACA;
}

.thumbs li a:hover span {
  position: absolute;
  z-index: 101;
  bottom: -30px;
  display: block;
  width: 98px;
  height: 25px;
  text-align: center;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  -o-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  -ms-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
  background: #fff;
  background: -webkit-linear-gradient(top, #fff 0%, #bcbcbc 100%);
  background: -moz-linear-gradient(top, #fff 0%, #bcbcbc 100%);
  background: -o-linear-gradient(top, #fff 0%, #bcbcbc 100%);
  background: -ms-linear-gradient(top, #fff 0%, #bcbcbc 100%);
  background: linear-gradient(top, #fff 0%, #bcbcbc 100%);
}

.thumbs li a:hover span::before {
  width: 0;
  height: 0;
  border-bottom: 5px solid white;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  content: "";
  position: absolute;
  top: -5px;
  left: 44px;
}
.card-header{
height:25%;
width: 100%;
display: table;
  height: 45px;
border-bottom:1px solid #C9CACA;
text-align: center;

}
.card-header h1{
vertical-align: middle;
    display: table-cell;
    font-size: 1rem;
     color: #40C2F1;
}
.wrapper-dropdown-5 {
    /* Size & position */
    position: relative;
    width: 200px;
    margin: 0 auto;
    margin-right:5px;
    margin-bottom: 10px;
    padding: 12px 15px;
   display: inline-block;
    /* Styles */
    background: #fff;
    border-radius: 5px;
     border: 1px solid #C9CACA;
    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease-out;
}

.inactive{
    /* Size & position */
  background: #f2f2f2;
  pointer-events: none;
  }

.wrapper-dropdown-5:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}
.wrapper-dropdown-5 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    width: auto;
    min-width: 200px;
    /* Styles */
    background: #fff;
    border-radius: 5px;
 
    list-style: none;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: scroll;
}

.dropdown::-webkit-scrollbar {
width: 0.5em;
 background: white;
 border-radius: 5px;

}
.dropdown::-webkit-scrollbar-thumb {
border-radius: 5px;
 background: #C9CACA;
}

.dropdown::-webkit-scrollbar-track {
border-radius: 5px;
}


.wrapper-dropdown-5 .dropdown li {
    padding: 0 10px ;
}

.wrapper-dropdown-5 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px 0;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}

.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
    color: #57a9d9;
}
.wrapper-dropdown-5.active {
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.wrapper-dropdown-5.active:after {
    border-color: #82d1ff transparent;
}

.wrapper-dropdown-5.active .dropdown {

    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}
.mini-left{
     width: 100px;
    margin: 0;
    padding: 12px 15px;
   display: inline-block;
    border-radius: 5px 0 0 5px;
     border: 1px solid #C9CACA;
    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;
    outline: none;
    transition: all 0.3s ease-out;
}
.mini-right{
     width: 100px;
    margin: 0;
        margin-right: 5px;
            margin-left: -5px;
    padding: 12px 15px;
   display: inline-block;
    /* Styles */
    border-radius: 0 5px 5px 0 ;
     border: 1px solid #C9CACA;
    -moz-box-shadow:    0.5px 0.5px 8px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 8px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 8px -1px #C9CACA;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease-out;
}


/* pagination */

.archive-pages{

}
.wrapper{
  background-color:red;
  margin:50px auto;
  width:100%;
}
/*****Delete this*****/

.archive-pages li.selected{
  color:white; 
}
.archive-pages a,
.archive-pages a:visited{
  color:#555;
}
.archive-pages li.selected{
  color:white;
  padding:5px;
  width:25px;
  line-height:20px;
  background: #063c65;
 
}
.archive-pages li.selected:hover{
  cursor:default;
  background: rgb(53,121,214); 
}
.archive-pages li:hover{
  background: #f2f2f2;
}
.archive-pages li a{
  cursor:pointer; 
  line-height:20px;
  display:block;
  padding:5px;
  float:left;
  width:25px;
  text-aling:center;
}
.archive-pages{
  display:block;
  float:left;
  padding:0px;
  margin:0px;
  font-size:.8em;
  border-radius: 3px; 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px;
}
.archive-pages ul{
  float:left;
  margin:0px;
  padding:10px;
  list-style:none;
}
.archive-pages li{
  border:1px solid #C9CACA;
  float:left;
  font-weight:700;
  margin:0 2px;
  text-align:center;
  border-radius: 3px; 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px; 
  background-color: white;
-moz-box-shadow:    0.5px 0.5px 5px -1px #C9CACA;
  -webkit-box-shadow: 0.5px 0.5px 5px -1px #C9CACA;
  box-shadow:         0.5px 0.5px 5px -1px #C9CACA;
 

}
.archive-pages .first a,
.archive-pages .previous a,
.archive-pages .next a,
.archive-pages .last a{
  overflow:hidden;
  white-space:nowrap;
  -webkit-transition-duration: 300ms;
  -webkit-transition-property: width,text-indent,letter-spacing;
  -webkit-transition-timing-function: ease;
  -moz-transition-duration: 300ms;
  -moz-transition-property: width,text-indent,letter-spacing;
  -moz-transition-timing-function: ease;
  -o-transition-duration: 300ms;
  -o-transition-property: width,text-indent,letter-spacing;
  -o-transition-timing-function: ease;
}
.archive-pages a{
  text-decoration:none; 
}
.archive-pages .next a:after,
.archive-pages .last a:after{
  content:" »";
}
.archive-pages .first a:before,
.archive-pages .previous a:before{
  content:'« '
}
.archive-pages .first a:hover,
.archive-pages .previous a:hover,
.archive-pages .next a:hover,
.archive-pages .last a:hover{
  width: 100px;
  text-indent:0;
  letter-spacing:0px;
}
.archive-pages .first a{
  text-indent:+6px;
  letter-spacing:10px;
}
.archive-pages .previous a{
  text-indent:+7px;
  letter-spacing:10px;
}
.archive-pages .next a{
  text-indent:-159px;
  letter-spacing:10px;
}
.archive-pages .last a{
    text-indent:-154px;
  letter-spacing:10px;
}





/*pagination ends*/





footer{
background: #02243E;
height:auto; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
    <!--META-->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
    <meta name="theme-color" content=""/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="{{asset('js/jquery.js')}}"></script>
    <!--<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i" rel="stylesheet">-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300">


</head>
<body>
<div class="details-container">
    <div class="details-card">
        <div class="details-card-header">
            <button class="close-button">X</button>
        </div>
        <div class="details-card-content">

        </div>

    </div>
</div>
<header>
</header>
<div class ="categories-section">
    <div class="section-container">

        <div class="content-area">
            <div class="image-card" onClick="showDetails(1)">
                <div class="card-wrap">
                    <div class="card-icon" style="background-image:url('{{asset('img/car1.jpg') }}')">

                    </div>
                </div>
                <div class="card-description">
                    <div class="card-text">
                        <div class="card-text-wrapper">
                            <div class="card-details">
                                <p class="vehicle-name">make</p>
                                <p class="vehicle-details">year</p>
                                <p class="vehicle-details">type</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-text">
                        <div class="card-text-wrapper">

                            <h1 class="price-tag">price</h1>

                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>
</div>
<div id="tSection" class="top-section">
</div>

<div class="slider-card">
    <ul class="slide">
        <li class="slide-container show-slide" data-slide="1"><div class="slide-image" style=" background:url(img/car1.jpg); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>
        <li class="slide-container" data-slide="2"><div class="slide-image" style=" background:url(img/car1.jpg); background-repeat:no-repeat;background-size:cover;background-position:center;" alt="" ></div></li>
    </ul>
    <ul class="thumbs">
        <li class="slide-thumb  show-slide-thumb" data-slide="1"><a ><img src="img/car1.jpg" /></a></li>
        <li class="slide-thumb" data-slide="2"><a ><img src="img/car1.jpg" /></a></li>
    </ul>
</div>
<div class="car-details-card">
    <div id="card-details" class="card-header">
        <h1>Car details</h1>
    </div>
</div>

<div class="contact-card">
    <div id="vendor-details" class="card-header">
        <h1>Vendor Contact Info</h1>
    </div>

</div>
<footer>
</footer>
</body>
</html>

Answer 1

您需要使用jQuery的委派点击处理程序机制。

请参阅http://api.jquery.com/on/

中的委派活动

我们在您的ul.thumbs HTML中添加了一个点击处理程序，因为我们启动时会出现这种情况。但是，在我们继续时，可以添加其他幻灯片。因此，标准事件处理程序不起作用（正如您所见）。

尝试点击动态添加的条目以查看此操作。

＆＃13;

＆＃13;

$(document).ready(function() 
{
    // We use a deferred click handler here as we will add further slide thumbs as we run...
    $("ul.thumbs").on("click", "li.slide-thumb", function(e)
    {
         alert( $(this).data("slide") );
    });
    
    // Dynamically add new slides
    for(var i=3; i<10; i++)
    {
        var $li = $("<li />").addClass("slide-thumb").data("slide", i);
        $li.append( $("<img />").attr("src","//tesco.scene7.com/is/image/tesco/410-8422_PI_TPS2655715?op_sharpen=1&amp;wid=90&amp;hei=90") );
     
        $("ul.thumbs").append($li);
    }
});

＆＃13;

img
{
    height:50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="thumbs">
    <li class="slide-thumb show-slide-thumb" data-slide="1">
        <img src="//tesco.scene7.com/is/image/tesco/410-8422_PI_TPS2655715?op_sharpen=1&amp;wid=90&amp;hei=90">
    </li>
    <li class="slide-thumb" data-slide="2">
        <img src="//images.clipartpanda.com/car-20clip-20art-nicubunu_Toy_car.png">
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;