Trying to get the id or name of the button that has been clicked. But I only get an undefined message in the popup when I try to access the id or name of the button. Could someone point me in the right direction to get this working?
<!DOCTYPE html PUBLIC "-//W2C//DTD HTML 4.01//EN" ".dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing : Buttons</title>
<script src=".11.0/jquery.min.js"></script>
</head>
<div id="buttons" style="width:100%;height:100%">
<p id="custom_buttons" >
</p>
</div>
<div id="footer">
</div>
<script type="text/javascript">
$(function() {
var datasetPresets = ["Python", "Java", "C++"];
var datasetPresetsContainer = $("#custom_buttons");
$.each(datasetPresets, function(index, value) {
datasetPresetsContainer.append("<button class=std_buttons value=" + value + ">" + value + "</button>");
});
$("button.std_buttons").click(function () {
var button = $(this);
alert(button.id);
});
});
</script>
</body>
</html>
</html
Trying to get the id or name of the button that has been clicked. But I only get an undefined message in the popup when I try to access the id or name of the button. Could someone point me in the right direction to get this working?
<!DOCTYPE html PUBLIC "-//W2C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing : Buttons</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<div id="buttons" style="width:100%;height:100%">
<p id="custom_buttons" >
</p>
</div>
<div id="footer">
</div>
<script type="text/javascript">
$(function() {
var datasetPresets = ["Python", "Java", "C++"];
var datasetPresetsContainer = $("#custom_buttons");
$.each(datasetPresets, function(index, value) {
datasetPresetsContainer.append("<button class=std_buttons value=" + value + ">" + value + "</button>");
});
$("button.std_buttons").click(function () {
var button = $(this);
alert(button.id);
});
});
</script>
</body>
</html>
</html
4 Answers
Reset to default 7Basically, try
alert(this.id);
instead of
alert(button.id);
But this question shows a minimum research effort, because it has been answered multiple times here, and a simple search would suffice:
How to get ID of button user just clicked?
Getting the ID of the element that fired an event
Get id of element on button click using jquery
how to get the id when a certain button is clicked using jquery
In pure javascript, you would do something like this
$("button.std_buttons").click(function (event) {
var button = event.target;
alert(button.id);
});
read more about event object here https://developer.mozilla.org/en/docs/Web/API/Event
You need to use attr() to get the id of your button because button is a jQuery object:
alert(button.attr('id');
or you can keep your selector but do not convert it to jQuery object:
var button = this;
alert(button.id);
you just use attr(), the properties are accessed using the attr("property name") in jquery
button.attr('id');
or just
$(this).id
alert(this.id)will do. – elclanrs Commented Mar 14, 2014 at 7:21