我有一个可单击的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/