Jquery timeout for doubleclick

Question

I have a clickable div which should first present a text instruction to tap again in order to fire ajax action, which is under a new class name added after a 1st click. This text has a timeout and will change back to the original.

The problem is that once the text is back to original the actual ajax fire action should stop working as well, but the actual class is not removed. Any suggestions?

What I really need is a kind of doubleclick with a 2second timeout..

function onlyfire() {
  $(".onlyfire").click(function() {
    var div = $(this);
    var original = $(this).html();
    div.html("Tap again");
    $(".onlyfire").addClass("fire");
    setTimeout(function() {
      $(div).html(original);
      $(".onlyfire").removeClass("fire");
    }, 2000);
    $(".fire").click(function(fire) {
      $.ajax({
        type: "POST",
        data: dataString,
        url: "something.php",
        cache: false,
        success: function(html) {
          div.html(html);
        }
      });
    });

    return false;
  });
};

<div class="onlyfire">
  Do Something
</div>

here is the jsfiddle: https://jsfiddle.net/jngqzw7q/1/

Possible duplicate of [Difference between .on('click') vs .click()](http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click) — Sherif, Aug 20 '16 at 16:15
@ZaheerAhmed I want to make it clickable only for those 2seconds.. The first click only to show instruction to tap again.. It's basically a double click.. I — 120382833, Aug 20 '16 at 16:21

trincot · Answer 1 · 2016-09-21T15:34:58.020

You could just use an if statement inside the click handler to see whether it is the first or second click (by checking the class), and perform the appropriate action:

function onlyfire() {
  $('.onlyfire').click(function() {
    var div = $(this);
    if (div.is('.fire')) { // second click
        alert("this is showing only when the text is 'Tap again'");
    } else { // first click
      var original = $(this).html();
      div.text("Tap again");
      div.addClass("fire").removeClass('.onlyfire');
      setTimeout(function(){ 
        $(div).html(original);
        $(".onlyfire").removeClass("fire");
      }, 2000);
    }
    return false;
  });
};
onlyfire();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onlyfire">
Do Something
</div>

Note: Setting a click handler inside an event handler for another click is not always that good an idea.

See http://stackoverflow.com/questions/39057179/why-is-click-event-attached-to-classname-fired-after-classname-is-removed? — guest271314, Aug 20 '16 at 18:08

guest271314 · Accepted Answer · 2016-08-20T18:58:56.820

1

You can use .one() with event namespace as parameter, .off() referencing event namespace

function handleClick(e) {
  var div = $(this).data("original", this.innerHTML);
  // var original = div.html();
  div.html("Tap again");
  $(".onlyfire").off("click").addClass("fire");
  // http://stackoverflow.com/questions/39057179/why-is-click-event-attached-to-classname-fired-after-classname-is-removed#comment65464000_39057261
  var fire = $(".fire");
  fire.one("click.fire", function() {
    alert("this should not be showing once the text is changed back to original");
  });
  setTimeout(function() {
    fire.off("click.fire");
    div.removeClass("fire")
    .html(div.data("original")).click(handleClick);
  }, 2000);
}

function onlyfire() {
  $(".onlyfire").click(handleClick);
};
onlyfire();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="onlyfire">
  Do Something
</div>

edited Aug 20 '16 at 18:58

answered Aug 20 '16 at 16:15

guest271314

1
15
104
177

Not working.. Once the text is back to Do something and I click again I should not see the alert.. To see alert I would need to click on Do Something and then in the first 2 second on tap again.. – 120382833 Aug 20 '16 at 16:19
_"To see alert I would need to click on Do Something and then in the first 2 second on tap again."_ Yes, that is current functionality. Not certain what you mean by "Not working"? Should `setTimeout` be cleared, and `html` set to `original` once `.fire` is clicked? – guest271314 Aug 20 '16 at 16:21
Once it's back to Do something alert should not be showing on click.. On Do something click, tap again should show and if you click in first 2 seconds then the alert is shown.. Not before nor after.. – 120382833 Aug 20 '16 at 16:30
1

Click on Do something, wait for 2 seconds until the Do Something is back, Click again and it will show the alert.. And it shouldn't.. It should display tap again and only if you click in first 2 seconds the alert should show up. – 120382833 Aug 20 '16 at 16:48
@120382833 Interesting. The `.fire` `className` is removed from `html`, though `click` event was still attached to `.onlyfire` element. See updated post, included `$(".fire").off("click")` within `setTimeout` – guest271314 Aug 20 '16 at 17:09
@120382833 See http://stackoverflow.com/questions/39057179/why-is-click-event-attached-to-classname-fired-after-classname-is-removed? – guest271314 Aug 20 '16 at 18:08
@120382833 See updated post. Added `event` `namespace`, to `.one()`, `.off()` calls; see see [Event names and namespaces](http://api.jquery.com/on/#event-names) – guest271314 Aug 20 '16 at 19:00

Jquery timeout for doubleclick

2 Answers2

Linked