1

How i can apply different events on one element, for instance

On one click i want to show exampleModal

and

on double click event

i want to show LoadedEvents

both events must be applied on one element which happen to be

<span class="glyphicon glyphicon-link connected hoverd"></span>





<!--Connected Events-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    ## One click
</div>

my jquery code is

<!--Loaded Events-->
<div class="modal fade bs-example-modal-sm" id="LoadedEvents">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
     Connected events..!
    </div>
  </div>


$('.connected').on('dblclick',function() {
        $('#exampleModal').modal({
            show: true
        });
    });

    $('.hoverd').on('click', function(event) {
        event.preventDefault();
        $('#LoadedEvents').modal({
            show: true
        });
    });
Share Knowledge
  • 297
  • 3
  • 18

1 Answers1

3

Well you could use the event that is being sent to the function and just stop it and count the clicks yourself. So it would be something like this:

var clickCount = 0;
var timeoutTarget;
$('.someElement').click(function(e){
    e.preventDefault();
    clickCount++;
    if(clickCount > 1)
        clearTimeout(timeoutTarget);
    timeoutTarget = setTimeout(function(){
        if(clickCount == 1) {
            // single click
        }
        if(clickCount > 1) {
            // double click
        }
        clickCount = 0;
    }, 300); // The amount of time you think you can give between clicks
});

Here is a fiddle if you want to test it: https://jsfiddle.net/7adad8x0/

Chris
  • 987
  • 6
  • 24