jQuery .data（）返回值且未定義

Question

 // jQuery: $('.slidebutton').click(function(event) { var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); }); 

 <!-- HTML: --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one-sixth"><a data-slide="1" class="slidebutton">RECRUITING</a></div> <div class="one-sixth slidebutton"><a data-slide="2" class="slidebutton">ONBOARDING</a></div> <div class="one-sixth slidebutton"><a data-slide="3" class="slidebutton">PERFORMANCE</a></div> <div class="one-sixth slidebutton"><a data-slide="4" class="slidebutton">LEARNING</a></div> <div class="one-sixth slidebutton"><a data-slide="5" class="slidebutton">HRMS</a></div> <div class="one-sixth slidebutton"><a data-slide="6" class="slidebutton">TALENT APPS</a></div> 

結果是兩個警報。 第一個是正確的，但是第二個總是＃slide-undefined

我要去哪里錯了？

Answer 1

click事件冒泡到父<div> ，它也具有slidebutton類。 有兩種可能的解決方案：

1. 防止事件冒泡：

    $('.slidebutton').click(function(event){ event.stopPropagation(); // http://api.jquery.com/event.stoppropagation/ var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); }); 

     $('.slidebutton').click(function(event){ event.stopPropagation(); // http://api.jquery.com/event.stoppropagation/ var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); }); 

     <!-- HTML: --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one-sixth"><a data-slide="1" class="slidebutton">RECRUITING</a></div> <div class="one-sixth slidebutton"><a data-slide="2" class="slidebutton">ONBOARDING</a></div> <div class="one-sixth slidebutton"><a data-slide="3" class="slidebutton">PERFORMANCE</a></div> <div class="one-sixth slidebutton"><a data-slide="4" class="slidebutton">LEARNING</a></div> <div class="one-sixth slidebutton"><a data-slide="5" class="slidebutton">HRMS</a></div> <div class="one-sixth slidebutton"><a data-slide="6" class="slidebutton">TALENT APPS</a></div> 

2. 僅將事件偵聽器附加到每個子<a> ：

    $('a.slidebutton').click(function(){ // a.slidebutton var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); }); 

     $('a.slidebutton').click(function(){ // a.slidebutton var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); }); 

     <!-- HTML: --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="one-sixth"><a data-slide="1" class="slidebutton">RECRUITING</a></div> <div class="one-sixth slidebutton"><a data-slide="2" class="slidebutton">ONBOARDING</a></div> <div class="one-sixth slidebutton"><a data-slide="3" class="slidebutton">PERFORMANCE</a></div> <div class="one-sixth slidebutton"><a data-slide="4" class="slidebutton">LEARNING</a></div> <div class="one-sixth slidebutton"><a data-slide="5" class="slidebutton">HRMS</a></div> <div class="one-sixth slidebutton"><a data-slide="6" class="slidebutton">TALENT APPS</a></div>