Click Event using JQUERY
Here is the syntax
$("element").click(function(){
/// code here ///
})<input type=button value='Click me' id='b1'><div id=t1></div><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>
<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
});$("#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
}).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
Tutorial ( Video ) on textarea counter
This article is written by plus2net.com team.
| Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |
JQuery Video Tutorials