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

Popular posts from this blog

c - Compilation of a code: unkown type name string -

java - Bypassing "final local variable defined in an enclosing type" -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -