Jquery how to use $(this) to get value of clicked item? - javascript

I have trouble getting value of particular item that I'd clicked
<html>
<head>
<script src="https://ajax.googleapis.com/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.

this 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.net/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.com/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){
common.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.

Related

jquery on event for a dynamically generated child of a dynamically generated child

I have a div that gets added to dynamically and I would like to have a mouseenter event for images that have been dynamically added in another tag. The div that is getting added to looks like this before hand:
<div class="chat_box">
</div>
and looks like this after content has been added:
<div class="chat_box">
<p class="chat">text here <img class="emote" src="emote.png"> more text</p>
</div>
I would like to have a mouseenter event for the image with the class of emote, but I cannot get it to work.
I have tried the following:
$('.chat_box').on('mouseenter', '.chat', function(){
alert();
});
and it works, but if I try to use the child selector
$('.chat_box').on('mouseenter', '.chat > .emote', function(){
alert();
});
and
$('.chat_box').on('mouseenter', '.chat > img', function(){
alert();
});
it doesn't work.
This was previously provided by .live(), but that function has been merged into .on() ... it creates an event watcher.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="chat_box"></div>
<button>Add</button>
<script>
$('button').click(function(){
$('<div class="chat"><img width=10 height=10 class="emote"></div>').appendTo('.chat_box');
});
$('.chat_box').on('mouseenter', 'img.emote', function(){ alert('test'); });
</script>
Just target the parent object and have it watch for the expected child.

Hide and show functionality not working

I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() {
$("#view").click(function(){
$("#allversion").show();
});
$("#view").click(function(){
$("#allversion").hide();
});
}
<div id="allversion" style="display:none">
SOME DISPLY CODE HERE
</div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() {
$('#view').click(function() {
$('#allversion').slideToggle();
});
});
#allversion {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){
$("#allversion").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>

Check what exatly button clicked, when multiple buttons with the same selector on page

I have a two buttons with the same selector class. When I do this:
$('.my_button').click(function() {
console.log(1);
});
, and then click on the button it log 1 two times, like I clicked both buttons instead single. So my question is: There exists some way in JS to get only that button what I clicked, without assign unique selector like id. I am newbien in JS, so can somebody explain me? I found related issue here. Thanks!
Edit:
I make buttons a little bit different. And yes, it returns only single button, but why click trigger works two times. Console log log two times.
Every event listener receives the event, which carries the event target. Try the below example.
$('.my_button').click(function(e) {
console.log(e);
console.log(e.currentTarget);
console.log($(e.currentTarget));
});
use this inside your function code
$('.my_button').on('click',function() {
var tempContainer=$(this).parent();
alert($(tempContainer).html()); // you ll see that you are showing the code where exists your clicked button
});
Assign different id to your buttons
$(".my_button").on("click",function(){
console.log($(this).attr("id"))
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="my_button" id="test" value="Test"/>
<input type="button" class="my_button" id="test2" value="Test-2"/>
Try this:
<button class="my_button">Content1</button>
<button class="my_button">Content2</button>
<script>
$( ".my_button" ).click(function( event ) {
console.log(1);
});
</script>
https://jsfiddle.net/nt9ryeyr/5/
Try this:-
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".p").click(function(e){
alert($(e.currentTarget).attr("value"));//button text on which you clicked
});
});
</script>
</head>
<body>
<input type='button' class="p" value='test'/>
</body>
</html>
if your html is like this
<button class="my_button">Test</button>
<button class="my_button">Test1</button>
then use this script
$('.my_button').click(function() {
if(this.innerHTML ==="Test")
console.log(1);
else
console.log(2);
});
or if your html is like this
<input type="button" class="my_button" value="Test"/>
<input type="button" class="my_button" value="Test1"/>
then use this script
$('.my_button').click(function() {
if($(this).val() ==="Test")
console.log(1);
else
console.log(2);
});

Changing a div's id on click

How do I add an onClick listener to a div.
I want to change the name of a div to divclass active if it was inactive previously & then remove the word 'active' if user click on the list again.
I'm at a loss how to do this.
This is what I've tried so far
<script>
$function tog(){
$(this).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
where the div whose class name I want to change is defined as below
<div id="dd" onclick="tog()" class="wrapper-dropdown-4">
<!--something-->
</div>
I've tried this..
<html>
<head>
<script>
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
</script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="dd" class="wrapper-dropdown-4">
ddddd
</div>
</body>
</html>
What's wrong with this now?
I'm inspecting the element id via chrome developer's tool & I don't see any change using this code. So, can anyone please help?
Thanks. :)
The only script you need is
$(function(){
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
});
Demo: Fiddle
you have to pass the object $(this) is not recognizable , use tog(this)
<script>
function tog(obj)
{
$(obj).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
<div id="dd" onclick="tog(this)" class="wrapper-dropdown-4">
<!--something-->
</div>
not the best way to do it, you can bind the event ,by registering the click in the event.

hide plusone button after click

I want to hide google's +1 button after the user clicks on it using jQuery; this is the code I'm using but it seems it's not functioning properly:
JS:
$(function() {
$("#button").click(function()
{
$(".HIDE").hide();
});
return false;
});
HTML:
<div class="HIDE">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="small" class="plusone"></g:plusone>
</div>
Use the +1 tag callback parameter to fire the hide function. There's probably a better way to select the +1 button but this works for the purpose of a demo.
<g:plusone size="tall" callback="poHide"></g:plusone>
<script src="http://apis.google.com/js/plusone.js"></script>
<script>function poHide(){ $("#___plusone_0").fadeOut(); }</script>
Demo: jsfiddle.net/Gju6T
You may want to try the HTML5 equivalent syntax:
<div class="g-plusone" data-size="standard" data-count="true"></div>
All in all, the rendered HTML will be the thing to look at.
I think this is what you need, but put it at the end of your page just above </body>
$('g\\:plusone').live('click',function (){
$(this).remove();
});
ELSE
try this...
$('iframe').contents().find('#plusone').live('click',function (){
$(this).remove();
});
orrr
<script>
function mycall(str){
console.log(str);
//$(str).hide();//???
}
</script>
<g:plusone size="small" class="plusone" callback="mycall"></g:plusone>
The button is rendered into an iframe you don't have access to. The <g:plusone> tag is replaced by JS with an iframe and you cannot observe this button via jQuery, for example with live() or bind(). You have to use the API of the button which can be found here.
There you find the option "callback" you could use like this:
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
// Call the API method after the page loaded
$(document).ready(function() {
gapi.plusone.render("HIDE",
{"size": "standard", "count": "true", "callback" : "hideTheButton"});
});
// Method to remove the element
function hideTheButton() {
$("#HIDE").hide();
}
</script>
<div id="HIDE">
<g:plusone></g:plusone>
</div>

Categories