jQuery滑块项目符号导航

Question

我在jQuery，CSS和HTML中创建了一个滑块。

它使用箭头和项目符号导航以及自动播放系统。

我遇到的问题是：我希望滑块更改用户单击各自的项目符号时显示的幻灯片（即项目符号1幻灯片1等）。但是，当用户单击项目符号时，什么都不会发生。

我已经尝试使用警报来确定代码失败的位置，但似乎$('.bullet').click(function(){})甚至在单击<span class="bullet">时甚至没有被调用。

该错误似乎是因为子弹是自动生成的。我不明白为什么。

下面就为大家小提琴：http://jsfiddle.net/TczNn/7/

这是代码：

<!-- BEGIN CONTENT --> 
     <div id="content"> 

      <!-- BEGIN CONTENT TOP SLIDESHOW --> 
      <div id="top-slide"> 
       <div class="wrapper"> 

       <!-- BEGIN CONTENT TOP SLIDESHOW SLIDES --> 
        <div id="slide0" class="slide"> 
         <h2>Your Site... Defined</h2> 
         <h4>With D&amp;D there is no inbetween, we will never compromise your requirements.</h4> 
        </div> 

        <div id="slide1" class="slide"> 
         <h2>Your Site... Defined 2</h2> 
         <h4>With D&amp;D there is no inbetween, we will never compromise your requirements.</h4> 
        </div>      

        <div id="slide2" class="slide"> 
         <h2>Your Site... Defined 3</h2> 
         <h4>With D&amp;D there is no inbetween, we will never compromise your requirements.</h4> 
        </div>      
       <!-- END CONTENT TOP SLIDESHOW SLIDES --> 

       </div> 

       <div id="numSlides">3</div> 

       <div class="arrows"> 
        <span class="arrow left"></span> 
        <span class="arrow right"></span> 
       </div> 
       <div id="select"> 
        <div class="wrapper"> 
         <div class="bullets"> 
         </div> 
         <div class="clear"></div> 
        </div> 
       </div>   
      </div> 
      <!-- END CONTENT TOP SLIDESHOW --> 
    </div> 

CSS：

/*==================================================== 
    D&D Creative Solutions 
    ---------------------------------------------- 
     Explore D&D Creative - v1.0 
     Date: 30/11/2012 
     Stylesheet By: David Passmore 
     StandAlone 
    ---------------------------------------------- 
© D&D Creative Solutions - All Rights Reserved 
====================================================*/ 

/*============================================ 
    ENABLE FONTS 
============================================*/ 

@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700); 

body { 
    font-family:"PT Sans"; 
    font-size:13px; 
} 

/*============================================ 
    LINKS 
============================================*/ 
a { 
    text-decoration:none; 
    color:#CCCCCC; 
    -moz-transition: color 150ms ease-out; 
    -webkit-transition: color 150ms ease-out; 
} 

/*============================================ 
    LAYOUT 
============================================*/ 
html, body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 

.wrapper { 
    width:1000px; 
    margin:0 auto; 
} 

#header .wrapper, #footer .wrapper { 
    width:1100px; 
} 

.clear { 
    clear:both !important; 
    float:none !important; 
} 

/*============================================ 
    HEADER 
============================================*/ 
#header { 
    position:fixed; 
    height:55px; 
    line-height:55px; 
    background-color:#3D3B37; 
    color:#FFFFFF; 
    width:100%; 
    top:0; 
    z-index:9999; 
} 

#header .wrapper ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 

#header .wrapper ul > li { 
    float:left; 
    margin:0 8px; 
} 

#header .wrapper div.main-nav { 
    float:right; 
    text-transform:uppercase; 
    font-size:12px; 
} 

#header .wrapper div.top-logo { 
    float:left; 
    text-transform:uppercase; 
    font-size:16px; 
    width:126px; 
    height:55px; 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/common/header/logo-new.png) center no-repeat; 
} 

/* 
#header .wrapper div.main-nav ul li.separator { 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/common/header/header-nav-sep.png) center no-repeat; 
    width: 5px; 
    height: 55px; 
} 
*/ 

#header .wrapper div.main-nav ul li.separator { 
    line-height:53px; 
} 

#header .wrapper div.main-nav ul li { 
    color:#CCCCCC; 
} 

#header .wrapper div.main-nav ul li a:hover { 
    color:#FFFFFF; 
} 

#header .wrapper div.main-nav ul li.active { 
    color:#FFFFFF; 
} 

/*============================================ 
    CONTENT 
============================================*/ 
#content { 
    min-height:100%; 
    margin-top:55px; 
    padding-top:10px; 
} 

/*============================================ 
    FOOTER 
============================================*/ 
#footer { 
    background-color:#3D3B37; 
    color:#CCCCCC; 
    height:30px; 
    line-height:30px; 
    font-size:10px; 
    text-transform:uppercase; 
} 

#footer .wrapper > div { 
    float:left; 
    margin-left:50px; 
} 

#footer .wrapper div.links ul li a:hover { 
    color:#FFFFFF; 
} 

#footer .wrapper div.social { 
    float:right; 
    margin-left:0; 
} 

#footer .wrapper div > ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 

#footer .wrapper div ul > li { 
    float:left; 
    margin:0 8px; 
} 

#footer .wrapper div.links ul li.separator { 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/common/footer/footer-nav-sep.png) top no-repeat; 
    width: 5px; 
    height: 17px; 
    margin-top: 5px; 
} 

/*============================================ 
    HOME.PHP 
============================================*/ 
#home #content #top-slide { 
    background-color:#3D3B37; 
    height:300px; 
    position:relative; 
    color:#FFFFFF; 
} 

#home #content #top-slide .slide { 
    position:absolute; 
    opacity: 0; 
    left:-1000px; 
} 

#home #content #top-slide .wrapper { 
    position:relative; 
} 

#home #content #top-slide #numSlides{ 
    visibility: hidden; 
} 

#home #content #top-slide h2, #home #content #top-slide h4 { 
    position:absolute; 
    margin:0; 
} 

#home #content #top-slide h2 { 
    margin:60px 0 0 0; 
    font-size:36px; 
    text-shadow: 0 1px 1px #1F1E1C; 
} 

#home #content #top-slide h4 { 
    margin:150px 0 0 0; 
    text-shadow: 0 1px 1px #1F1E1C; 
} 

#home #content #top-slide .arrows { 
    width:1100px; 
    margin:0 auto; 
    height:300px; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
} 

#home #content #top-slide .arrows span.arrow { 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/home/arrows.png) no-repeat; 
    display:block; 
    height:36px; 
    width:25px; 
    position:absolute; 
    top:40%; 
} 

#home #content #top-slide .arrows span.arrow.left { 
    background-position:left; 
    left:0; 
} 

#home #content #top-slide .arrows span.arrow.right { 
    background-position:right; 
    right:0; 
} 

#home #content #top-slide #select { 
    height:48px; 
    width:100%; 
    position:absolute; 
    bottom:0; 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/home/bg-slie-select.png) repeat; 
    display:none; 
    line-height:48px; 
} 

#home #content #top-slide #select span.bullet { 
    height:48px; 
    width:25px; 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/home/bullets.png) no-repeat right; 
    line-height:48px; 
    display:block; 
    float:left; 
    cursor:pointer; 
} 

#home #content #top-slide #select span.bullet:hover { 
    background-position:center; 
} 

#home #content #top-slide #select span.bullet.selected { 
    background-position:left; 
} 

#home #content #twitter-main { 
    background-color:#cccccc; 
    height:200px; 
    margin:10px 0; 
    padding-top:30px; 
    text-align:center; 
} 

#home #content #twitter-main i.icon-twitter { 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/common/social/twitter.png) no-repeat center; 
    width:37px; 
    height:37px; 
    margin:0px auto 20px auto; 
    display:block; 
} 

#home #content #twitter-main span.divider { 
    border-top:1px solid #535353; 
    height:0; 
    width:100px; 
    display:block; 
    margin:0 auto; 
} 

#home #content #twitter-main h2.feed { 
    margin:40px 0; 
} 

#home #content #twitter-main p.info { 
    font-size:10px; 
    color:#666666; 
} 

#home #content #services { 
    height:500px; 
    margin:0 0 10px 0; 
    background:#DDDDDD; 
    padding-top:20px; 
} 

#home #content #services .wrapper > h2{ 
    margin-top:0px; 
    font-size:24px; 
} 

#home #content #services .cols .col { 
    margin:0 50px; 
    float:left; 
    width:233px; 
    text-align:center; 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/home/services-c-c.png) no-repeat top; 
    height:260px; 
    padding-top:170px; 
} 

#home #content #services .cols #ac.col { 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/home/services-c-ac.png) no-repeat top; 
} 

#home #content #services .cols #sup.col { 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/home/services-c-support.png) no-repeat top; 
} 

#home #content #services .cols #qu.col { 
    background:url(http://new.dpwebdev.co.uk/business-sites/explore-d-and-d/media/img/home/services-c-qu.png) no-repeat top; 
} 

#home #content #services .cols .col span.divider { 
    border-top:1px solid #3D3B37; 
    height:0; 
    width:100px; 
    display:block; 
    margin:0 auto; 
} 
/*============================================ 
    STAFF.PHP 
============================================*/ 
#staff #content #top-content { 
    background-color:#3D3B37; 
    height:300px; 
    margin-top:-10px; 
    position:relative; 
    padding-top:20px; 
    color:#FFFFFF; 
    text-align:center; 
} 

#staff #content #top-content h1 { 
    font-size:36px; 
} 

#staff #content #top-content span.divider { 
    border-top:2px solid #FFFFFF; 
    height:0; 
    width:400px; 
    display:block; 
    margin:0 auto; 
} 

/*============================================ 
    STAFF.PHP 
============================================*/ 

#contact #content #top-content { 
    background-color:#3D3B37; 
    height:300px; 
    margin-top:-10px; 
    position:relative; 
    padding-top:20px; 
    color:#FFFFFF; 
    text-align:center; 
} 

#contact #content #top-content h1 { 
    font-size:36px; 
} 

#contact #content #top-content span.divider { 
    border-top:2px solid #FFFFFF; 
    height:0; 
    width:400px; 
    display:block; 
    margin:0 auto; 
} 

JS：

$(document).ready(function() { 


    //HOME.PHP 
    $('#home #top-slide').bind("mouseenter", function(){ 
     $('#select').stop(true).fadeIn(600); 
    }); 

    $('#home #top-slide').bind("mouseleave", function(){ 
     $('#select').stop(true).fadeOut(600); 
    }); 




    //HOME.PHP - SLIDER 

    function mainSlider() { 
     var numsliders; 
     var currentSlider = 0; 
     var interval; 
     var slideWidth; 

     $('#slider0').css('opacity', 1); 
     $(document).ready(function() { 
      numsliders = parseInt($('#numSlides').html()); 
      generateBullets(); 
      $('#slide0').css('left', '0px'); 
      $('#slide0').css('height', '300px'); 
      $('#slide0').css('width', '1000px'); 
      $('#slide0').css('top', '0px'); 
      $('#slide0').css('opacity', '1'); 
      $('#slide0').addClass("showing"); 
      slideWidth = $('#slide0').width(); 
     }); 

     function nextSlider() { 
      specificSlider((currentSlider + 1) % numsliders); 
     } 

     interval = window.setInterval(nextSlider, 7000); 

     //arrow, bullet and autoplay functions 




     function previousSlider() { 
      if (currentSlider !== 0) { 
       specificSlider((currentSlider - 1)); 
      } 
     } 

     function generateBullets() { 
      var $bullet = $('#select .bullets'); 

      for (var i = 0; i < numsliders; i++) { 
       $bullet.append('<span class="bullet" id="' + i + '"></span>'); 
      } 

      $('.bullets #0').addClass("selected"); 
     } 

     //call arrow functions 
     $('span.arrow.left').click(function() { 
      previousSlider(); 
     }); 

     $('span.arrow.right').click(function() { 
      nextSlider(); 
     }); 

     //call bullet functions 
     $('.bullet').click(function() { 

      var $id = $(this).attr("id"); 

      specificSlider($id); 
     }); 


     function specificSlider(sliderNumber) { 
      window.clearInterval(interval); 

      // move the next slider on deck 
      $('#slider' + sliderNumber).css('left', $('#top-slide').css('width')); 
      $('#slider' + sliderNumber).css('top', '0px'); 
      $('#slider' + sliderNumber).css('height', '300px'); 
      $('#slider' + sliderNumber).css('width', '1000px'); 

      // move old slide off, 
      $('#slide' + currentSlider).animate({ 
       left: '-1020px', 
       top: '0px', 
       height: '300px', 
       width: '1000px', 
       opacity: 0 
      }, 900, null); 
      $('#slide' + currentSlider).removeClass("showing"); 
      $('.bullets #' + currentSlider).removeClass("selected"); 

      // new slide on 
      $('#slide' + sliderNumber).animate({ 
       left: '0px', 
       height: '300px', 
       width: '1000px', 
       top: '0px', 
       opacity: 1 
      }, 900, null); 
      $('#slide' + sliderNumber).addClass("showing"); 
      $('.bullets #' + sliderNumber).addClass("selected"); 

      currentSlider = sliderNumber; 

      interval = window.setInterval(nextSlider, 7000); 
     } 
    } 

    //initalise slider 
    mainSlider(); 

});​ 

Answer 1

您是动态创建跨度子弹类..所以..你需要委托事件静态父正常的单击事件将不会工作。

$('.bullet').click(function() { 

应该是

$('body').on('click','.bullet' ,function() {