Onclick get element id result undefined jquery

Question

I know this will mark as duplicate.. but i already try looking other post even i ask Mr. Google but i totally confuse.. i try use every sample on post but seems not all work..

What i'm trying to archive is.. when i click button jquery will show button id on alert popup. But i always got result undefined.

Here my sample code

PHP

<button class="myButton" name="testResultByName" data-value="testResultByDataValue" id="testResultByID">Click</button>

JQUERY and i put this code right before closing body </body> tag and already try on top right before closing head </head> tag

<script type="text/javascript">
$('.myButton').click(function(event){
        var myButtonVar = $(this).prop('data-value');

        alert(myButtonVar);
        event.preventDefault();
});
</script>

I already try to use

$(this).prop('id');
$(this).prop('name');
$('.myButton').attr('data-value');
$('.myButton').attr('id');
$('.myButton').attr('name');

nothing work.. but if i use class like below it's work...

$('.myButton').prop('class');

then alert show class name "myButton" seems work.. i already use external jquery file too.. but nothing work.. already use ready() too but result still same..

did i miss something? oh and i use jquery-1.11.3.js

Answer 1

You $.data instead of .prop , like so

$('.myButton').click(function(event){
    var myButtonVar = $(this).data('value');
    var buttonId = $(this).attr('id');

    console.log(myButtonVar);
    console.log(buttonId);
});

Example

Answer 2

You get the value from the attr().

Please see the example code for the same

 $(document).ready(function(){ $('.myButton').click(function(event){ var myButtonVar = $(this).attr('data-value'); alert("data-value = "+myButtonVar); myButtonVar = $(this).attr('id'); alert("id = "+myButtonVar); myButtonVar = $(this).attr('name'); alert("name = "+myButtonVar); myButtonVar = $(this).attr('class'); alert("class = "+myButtonVar); event.preventDefault(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button class="myButton" name="testResultByName" data-value="testResultByDataValue" id="testResultByID">Deposit</button> 

Answer 3

Try this:

$('.myButton').on('click', function(){
    var btnValue = $(this).attr('data-value');
    alert(btnValue);
    return false;
});