我有一个可单击的div,它应该首先显示一条文本指令以再次点击以触发ajax操作,该操作是在第一次单击后添加的新类名下。此文本有超时,将更改回原始文本。

问题在于,一旦文本恢复为原始,实际的ajax触发操作也应停止工作,但不会删除实际的类。有什么建议?

我真正需要的是一种具有2秒超时的双击。



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>





这是jsfiddle:
https://jsfiddle.net/jngqzw7q/1/

最佳答案

您可以将.one()event namespace作为参数使用,.off()引用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>

关于javascript - jQuery的doubleclick超时,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39056183/

10-12 12:29
查看更多