Use JQuery this with onClick

jquery on click this

JQuery is a library written with Pure Vanilla JavaScript. Jquery really solved the issues with selectors and firing an event and handling JavaScript using JQuery is very easy now. Today I am going to how we can use JQuery this on click event which gets the current element because it is sometimes can waste your many precious hours till you get it right. so let’s jump right into an example:

<button id="btn">Click Me</button>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// it is important to include jquery library 

$("#btn").on('click', function() {
     console.log('you just clicked on button');
})
</script>

You can start jquery with “$ sign as well. With this code snippet, you can do some cool stuff with the click of a button

Jquery this on click:

with the use of “this” you can get the current clicked element. let me show you what I mean

<button id="btn" class="current_btn" value="button-value">Click Me</button>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// it is important to include jquery library 

$("#btn").on('click', function() {
     alert($(this).attr('value'))
})
</script>

the above snippet of code will return an alert with the value of button which is “button-value”.

Return value of JQuery this in JQuery:

In jquery, you can get all the attributes of element at which the event is being performed, with $(this). let me show you an example of toggle class with button click:

<button id="btn" class="current_btn" value="button_clicked">Click Me</button>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// it is important to include jquery library 

$("#btn").on('click', function() {
     $(this).toggleClass("new_class")
})
</script>

with this toggle, I am adding a new class everytime the button is clicked and we can predefine a style with CSS on this new class. So here is the below an example on defining some styles with toggle class.



<style>
    .new_class {
	background-color:#44c767;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
.new_class:hover {
	background-color:#5cbf2a;
}
.new_class:active {
	position:relative;
	top:1px;
}
</style>
<button id="btn" class="current_btn" value="button_clicked">Click Me</button>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// it is important to include jquery library 

$("#btn").on('click', function() {
     $(this).toggleClass("new_class")
})
</script>

Change Text on button Click in JQuery:

What if you want to change the text of the current clicked button. It is very simple with the help of $(this) function in jquery. Let me show you how we can do this:



<button id="btn" class="current_btn" value="button_clicked">Click Me</button>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// it is important to include jquery library 

$("#btn").on('click', function() {
     $(this).text("New Text")
})
</script>

Get the parent of clicked element with $(this) in JQuery:

As I said before, $(this) can be very powerful if you know what you are doing. You can get the parent elements of the clicked button and not only parent, you can also get the child elements as well. You can modify or change the DOM accordingly. I will show you an example on how you can do it very easily.

<div id="add_text"></div>
<button id="btn" class="current_btn" value="button_clicked">Click Me</button>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// it is important to include jquery library 

$("#btn").on('click', function() {
    $(this).parent().text("Hello Dev Lizards")
})
</script>

as you can see, it is not a big deal to add anything into the div.

Get ID of click element with$(this) JQuery:

There could be some situation where you would like to get the ID of current clicked element so that you can perform a different event or style or anything accordingly and doing this in JQuery is very simple. with the help of $(this) you can get the id of the clicked element and do whatever you want to do with it. Here is the example below:



<button id="btn" class="current_btn" value="button_clicked">Click Me</button>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
// it is important to include jquery library 

$("#btn").on('click', function() {
     console.log($(this).attr('id'))
})
</script>

Here you can see the “attr” in JQuery can get any attribute of the current clicked element if it exists. It can be very powerfull in a certain situation.