Develop Reference

Unable to get Data Attribute value of dynamically generated buttons in jQuery

I am new to JavaScript and was trying to figure our how to access data attribute values of dynamically generated buttons.
I was passing my ID coming from the Database to "data-id" attribute. Below is the dynamically generated code for my buttons
<button class='btn btn-sm btn-primary aButton' data-id='1234'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>
Now i wanted to access these buttons onclick using jquery to perform some actions. Below is my code for that
$(document).on('click', '.aButton', () => {
let id = $(this).attr('data-id');
console.log(id);
})
The above console gives me "undefined" with the thick arrow function. When I tried to do the same with function () {}, it gave me the dynamic ID stored in the data attribute of the button.
What is happening with this? Is there a better approach to get a dynamic ID of button on click.
Thank you all in advance.
Have a nice day :)

When you use arrow function () => {} then jquery don't know what this refers to so use:
$(document).on('click', '.aButton', (e) => {
let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
console.log(id);
})
Demo
$(document).on('click', '.aButton', (e) => {
let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
console.log(id);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='btn btn-sm btn-primary aButton' data-id='1234'><i>testers</i></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>

How to get multiple values using JSTL tags?

I have this button:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser}" onclick="deleteUser(this.value)">Delete</button>
That calls the function deleteUser once the button is clicked.
I would like to know how to send more than one value at the same time.
For example, if I want to send the idUser and the userName, how can I do it?.
I tried this but it's not working:
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="${usr.idUser, usr.userName}" onclick="deleteUser(this.value)">Delete</button>
I expect to receive the values in the same jsp page:
function deleteUser(val1, val2) {
alert(val1);
alert(val2);
}

You can simply pass your values under your function under '' quotes else it will give you error not defined.So your button code will look like below :
<button type="button" class="btn btn-danger" value="something" id="deleteuserbtn" onclick="deleteUser(this.value ,'${usr.idUser}','${usr.userName}')">
Delete</button>
Demo Code :
function deleteUser(val1,val2,val3){
alert("val :"+val1 +" "+val2+" "+val3);
}
<button type="button" class="btn btn-danger" id="deleteuserbtn" value="something" onclick="deleteUser(this.value,'${usr.idUser}','${usr.userName}')">
Delete</button>

How to pass value in a function on click, Knockout

I have this button that should pass the value of a field, Page on click event to this function SelectPage in my JS. Any idea why it is not working?I am getting a null as input to the function.
<button data-bind="click: $root.selectPage.bind($root, $root.rootData.Page())" id="gotoBtn" class="btn btn-default" type="button">Go!</button>

See http://knockoutjs.com/documentation/click-binding.html, note 2:
<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
Click me
</button>
You need to wrap your function call to pass in params
Edit: your function, updated
<button data-bind="click: function(){$root.selectPage.bind($root, $root.rootData.Page());}" id="gotoBtn" class="btn btn-default" type="button">Go!</button>

jquery doesnt get the value of hidden input... returns undefined

<input type="hidden" value="pgrOtbU2qq">
<button class="btn btn-primary delete" onclick="deleteEvent()">Delete</button>
function deleteEvent(){
var id =$(this).siblings('input[type=hidden]').val();
console.log(id);
}
The console returns undefined!
I have tried this with .attr("value") but nothing happens...
EDIT:
function deleteEvent(){
var id =$("button").siblings('input[type=hidden]').val();
console.log(id);
}

Since you are using jQuery I think this might be a better approach for you
HTML
<input type="hidden" value="pgrOtbU2qq">
<button class="btn btn-primary delete">Delete</button>
JavaScript
$('button.delete').click(function(){
var id = $(this).siblings('input[type=hidden]').val();
alert(id);
});
FIDDLE

You need to pass this to your function to get a reference to current clicked element:
<button class="btn btn-primary delete" onclick="deleteEvent(this)">Delete</button>
and use:
function deleteEvent(el){
var id = $(el).siblings('input[type=hidden]').val();
console.log(id);
}
Fiddle Demo

using variables inside handlebars helper

I have a handlebars helper that compares two values. My code is below
{{#compare action "blank" operator="!="}}
<button type="button" class="btn btn-primary btn-xs btn-approval" data-id="{{../sid}}" data-table="distributor">Approve</button>
<button type="button" class="btn btn-danger btn-xs btn-delete-approval" data-id="{{../sid}}" data-table="distributor">Delete</button>
{{/compare}}
for some reason I can't access the sid variable inside the helper. How would I do that?

Pass sid it as parameter to helper. And you can access it as an argument in helper function.
{{#compare ../sid action "blank" operator="!="}}
<button type="button" class="btn btn-primary btn-xs btn-approval" data-id="{{sid}}" data-table="distributor">Approve</button>
<button type="button" class="btn btn-danger btn-xs btn-delete-approval" data-id="{{sid}}" data-table="distributor">Delete</button>
{{/compare}}
The helper function can then access it as an argument.
Handlebars.registerHelper('compare', function(sid, action, blank, operator, options) {
this.sid = sid;
// your code here...
});