Double Click Event using JQUERY

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

Here is the syntax
$("element").dblclick(function(){
.....
})
Here is the code to show how to execute double click of a button.

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

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

})
</script>

Double Click event and common class

If we have set of buttons with same class then we can apply double click event to the class. This way we can execute common code for all the buttons having same class.
<script>
$(document).ready(function() {
$(".edit_class").dblclick(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").dblclick(function(){
var id = $(this).attr('id');});
})
})
</script>

Other event along with double click

We can trigger common code to execute by adding other events to double 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);
});
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