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

点击事件正在冒泡到父级 <div> ，其中还有 slidebutton类(class)。有两种可能的解决方案:

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>