click event on any element using Jquery click of button or text

Click event is created when we click Mouse button over the element

Here is the syntax

$("element").click(function(){
/// code here ///
})

We can trigger code by using click event over a button or over some text. Here is the code .

<input type=button value='Click me' id='b1'><div id=t1></div>

JQUERY

<script>
$(document).ready(function() {

$("#b1").click(function(){
$("#t1").html('You clicked the button');
});


})
</script>

Click event on Class

We usually assign one class name to a group of element. For example if there are 10 records ( or multiple records ) displayed then each record will have its own edit button. All edit buttons will have one common class name say class=edit_class and all will have one unique id. When user click any one of the 10 edit button the click function has to fire. Here we can't write click event 10 times for each button , so we will write a single click event for the class.

<script>
$(document).ready(function() {

$(".edit_class").click(function(){
/// your code for click event here ///
});

})
</script>

Once the event is fired then we can find out which button is clicked by the user.

<script>
$(document).ready(function() {

$(".edit_class").click(function(){
var id = $(this).attr('id');});
})
})
</script>

Click event for a set of radio buttons

Here our radio buttons have common name ( name=options)

$("input:radio[name=options]").click(function() {
var value= $(this).val();
})

Other event along with click

We can trigger common code to execute by adding other events to click event. We may want to execute same code for single click or double click event.

$('#b1').bind('click dblclick', function(){
// Your code here
});

How to identify which event has triggered ?

$("#b1").on('dblclick click',function(e){
$("#t1").html('Your type of Click event  : '+e.type);
});

Video Tutorial on Mouse Events

Click event after DOM is created

Example : We are dynamically loading part of page based on some event. Here the DOM is already created so events associated with the elements loaded later can’t be captured by just using the above mentioned click methods.

Such situation will arise when part of the page is displayed by using load().

To capture the events associated with this part of the elements which are loaded subsequently we will use this code.

$('#display_body').on('click', ".edit_class", function () {
// Your code here 
})

#display_body is the element to where part of the page is loaded after DOM is created.
.edit_class is the class associated with the element for which events are monitored.
Double Click event DEMO : Which event has triggered
DEMO of Click Event