Question

我有一个可点击的div，它应该首先显示一个文本指令，以便再次点击以激发ajax动作，这是在第一次点击后添加的新类名。此文本已超时，将更改回原始文本。

问题是，一旦文本恢复原状，实际的ajax fire动作也应该停止工作，但实际的类不会被删除。有什么建议吗？

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

您可以在点击处理程序中使用if语句来查看它是第一次还是第二次点击（通过检查类），并执行相应的操作：

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>

注意：在事件处理程序中为另一次单击设置单击处理程序并不总是那么好。

Answer 2

您可以.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>

双击的Jquery超时

2 个答案: