javascript - jQuery .data() returning value AND undefined -
javascript - jQuery .data() returning value AND undefined -
class="snippet-code-js lang-js prettyprint-override">// jquery: $('.slidebutton').click(function(event) { var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); });
class="snippet-code-html lang-html prettyprint-override"><!-- 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>
the result 2 alerts. first right, sec #slide-undefined
where going wrong?
the click event bubbling parent <div>
, has slidebutton
class. there 2 possible solutions:
prevent event bubbling:
$('.slidebutton').click(function(event){ event.stoppropagation(); // http://api.jquery.com/event.stoppropagation/ var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); });
class="snippet-code-js lang-js prettyprint-override"> $('.slidebutton').click(function(event){ event.stoppropagation(); // http://api.jquery.com/event.stoppropagation/ var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); });
class="snippet-code-html lang-html prettyprint-override"> <!-- 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>
only attach event listener each kid <a>
:
$('a.slidebutton').click(function(){ // a.slidebutton var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); });
class="snippet-code-js lang-js prettyprint-override"> $('a.slidebutton').click(function(){ // a.slidebutton var slide = $(this).data('slide'); slide = "#slide-"+slide; alert(slide); });
class="snippet-code-html lang-html prettyprint-override"> <!-- 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>
javascript jquery
Comments
Post a Comment