Click Event using JQUERY

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

Here is the syntax
$("element").click(function(){
.....
})
We can trigger code by using click event over a button or over some text. Here is the code .
<script>
$(document).ready(function() {

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

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

})
</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();
})

More on Radio buttons

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);
});
Visitors Rating
Your Rating




Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2019 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer