A jQuery click event occurs when you click on an HTML element. The jQuery click() method is used to trigger a click event. For example, clicking a paragraph on a document (web page) will trigger a $(‘p’).Click() click event. We can combine the function with the click() method to execute the function when a click event occurs, this way we can execute a piece of code whenever a click event is triggered. In this guide, we will learn about the jQuery click() method.
jQuery click() Method Syntax
$(selector).click(function(){
//A block of code that runs when a click event is triggered
}); jQuery click() Method example
In the following example, when you click on a paragraph, it disappears. This is because we have associated the click() method with the paragraph selector and in the custom function we hide the current component using the hide() method. When a paragraph is clicked, a custom function is run within the click event.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('p').click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2>jQuery click event example</h2>
<p>This example is published on thecodehubs.com. This paragraph will be hidden when you click on it.</p>
</body>
</html> I prefer .on over .click because the former memory can use less memory and work for dynamically added elements, the simple difference between a click and onclick method in jquery.
jQuery On click() Syntax
$(selector).on('click', function(){
//A block of code that runs when a click event is triggered
});
$(document).on('click', 'selector', function(){
//A block of code that runs when a click event is triggered
}); where we add new buttons using jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.add-button').click(function() {
var button1 = '<button class="button1">Click</button>';
var button2 = '<button class="button2">On Click</button>';
var button3 = '<button class="button3">Document On Click</button>';
$('body').append(button1 + button2 + button3);
});
// click
$('.button1').click(function() {
alert('Click');
});
// on click
$('.button2').on('click', function() {
alert('On Click');
});
// document on click
$(document).on('click', '.button3', function() {
alert('Document On Click');
});
});
</script>
</head>
<body>
<button class="add-button">Add Button</button>
</body>
</html> Result
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular