jQuery hover and click Method Tutorial (Part 2)
In previous jQuery tutorial, we got some basic idea how to use hover method. In this jQuery tutorial, we show how to use the click method.
Syntax of jQuery click event
The syntax of jQuery hover event is similar to hover event. The click() method will triggers the click event when an element is clicked. Same as the hover event, a function will be run or binded when the click event is triggered.
jQuery click Event Example
The jQuery codes below will display the ID of selected element in a Textarea field when mouse pointer click on the cloud element. The message in the Textarea field will be removed when mouse leave the selected element.
// Declare a variable
var targetElement = $("#cloud");
targetElement.click(function() {
elementName = this.id;
$("#outputText").css( {"color": "#090", "font-size": "16px" } ).text("The name is: " + elementName);
});
targetElement.mouseout(function() {
$("#outputText").css( {"color": "red", "font-size": "14px" } ).text("");
});
The result is:
Part 1 of jQuery hover and click method Tutorial
This is the end of jQuery hover and click method tutorial.