获取附加值，以使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中添加一个单击处理程序，因为该处理程序在启动时会出现。 但是，随着我们的进行，还可以添加其他幻灯片。 因此，标准事件处理程序将不起作用（如您所见）。

尝试单击动态添加的条目以查看实际效果。

 $(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); } }); 

 img { height:50px; } 

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