I have trouble getting value of particular item that I'd clicked
<html>
<head>
<script src=".12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(this).click(function(){
alert($(this).find("button").html());
});
});
</script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
- I'd tried
$(this).find("button").html(), but it will return the value of 1st button("Yes) even if I clicked the 2nd button("No") - Same for
$(this).find("p").html(), will return value of 1st - How do I use
$(this)to get the value of item I clicked? - Don't suggest me to insert class or id, I'm not suppose to touch the html.
- Please assist, thanks.
I have trouble getting value of particular item that I'd clicked
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(this).click(function(){
alert($(this).find("button").html());
});
});
</script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>
- I'd tried
$(this).find("button").html(), but it will return the value of 1st button("Yes) even if I clicked the 2nd button("No") - Same for
$(this).find("p").html(), will return value of 1st - How do I use
$(this)to get the value of item I clicked? - Don't suggest me to insert class or id, I'm not suppose to touch the html.
- Please assist, thanks.
-
5
You are binding your event to the document, not to the button. Try
$("button").click()instead. Example: jsfiddle/9khopv7k – Hanlet Escaño Commented Aug 11, 2016 at 3:47 - 2 not sure why SO users have a habit of down voting people that clearly are still learning... – sijpkes Commented Aug 11, 2016 at 4:12
-
1
Hi @HanletEscaño , Thanks, Solved my issue, this is what I do now
$("button").click(function (){ if ($(this).html() == "Yes"){})– nicker Commented Aug 11, 2016 at 4:13
6 Answers
Reset to default 3this in your click handler is always the document (which you've bound the handler to), so that doesn't help anything. Instead, use something like
$(document).click(function(e){
if ($(e.target).is("button"))
console.log($(e.target).text());
} else {
console.log("not clicked (directly) on a button");
}
});
or rather just
$(document).on("click", "button", function(e){
console.log($(this).text());
});
It is because $(this).click event listener is added to document object and not any specific html element.
$(document).ready(function(){
$('button,p').on('click',function(){
alert($(this).html());
});
});
plunker: https://jsfiddle/wx38rz5L/1743/
If you are trying to get each button's html on click, use this.
$('button').click(function () {
alert($(this).html());
});
Bind the click event on both button and get the content of the html element with innerHTML.
$(document).ready(function() {
$('button').click(function(event) {
alert(event.target.innerHTML);
});
});<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p>test 1</p>
<p>test 2</p>
<button>Yes</button>
<button>No</button>
</body>
</html>You have to detect which $(this) is binded for ? Try something like this:
- Setup an object
<button class="btn red btn-xs editbtn" type="button" value="${rs.id}" value="${rs.id}">
- Function for this object
$(function(){
$('.editbtn').click(function(e){
mon.showSpinner();
var idbbpdtd = $(this).val();
});
});
Try this.
$(document).ready(function() {
$(this).click(function(event) {
alert(event.target.innerHTML);
});
});
In jQuery event.target always refers to the element that triggered the event.