javascript - jQuery getting data attribute not working -

i have script produces number of buttons class , want alert data attribute on click it's not working.

here output of html

<button class="request box-button" data-value="18492500814">request</button> 

jquery code

$(document).ready(function(){     $('.request').each(function () {         var photoid = $(this);         photoid.click(function () {             alert($(this).data('value'));         });     }); }); 

since elements don't exist when page loads, event won't bound them. fix using event delegation:

$(document).ready(function(){     $(document).on('click','.request', function () {             alert($(this).data('value'));     }); }); 

js fiddle demo dynamically generated elements

note: here, used $(document).on() because don't have page's structure. if insert buttons in container exists in html, use instead: $('#mycontainer').on(). won't noticeable, best performance.