[英]jQuery function running multiple times despite input being disabled?
I'm having an issue where a function (and subsequent callback functions) continue to run after the first keypress, despite the fact that I'm specifically disabling the input and unbinding keypress. 我遇到一个问题,即尽管我专门禁用了输入并解除了按键的绑定,但在第一次按键后函数(以及后续的回调函数)仍继续运行。 The weird thing is, these additional results only start appearing after a significant amount of time has passed (10+ seconds I would guess).
奇怪的是,这些额外的结果仅在经过相当长的时间(我猜是10+秒)之后才开始出现。 You can see this error in action by going to http://isitsketch.com and mashing on the enter button while entering an address.
通过访问http://isitsketch.com并在输入地址的同时按Enter键,您可以看到实际的错误。 The relevant code is this:
相关代码是这样的:
$('.location-form').keypress(function(event){
if (event.which == 13){
$(this).find('input').attr('disabled','disabled');
$(window).unbind("keypress")
console.log('search entered')
event.preventDefault();
userAddress = $("#input1").val()
address = userAddress.replace(/\s+/g, '+');
getMaps(address)
event.stopPropagation()
return false;
} else {
return true;
}
});
The function that displays the results is this: 显示结果的函数是这样的:
function displayResults(sketchLevel, robberies, assaults, burglaries, thefts, weapons, topFiveArr) {
$('#newResults').append('<h4 id="feedback" style="color:white;text-align:center;">' + userAddress + '</h4>')
$("<h2 id='result-level'>Sketch Level: <span class='redText'>"+ sketchLevel +"</span></h2>").appendTo("#newResults")
$('<div id="indicator"><div id="bar"></div><div id="dial"></div></div>').appendTo("#newResults")
$('<a id="tryAgain" class="waves-effect waves-light btn" href="http://isitsketch.com">Enter a New Address</a>').appendTo("#newResults")
$('<p id="explanation">These results are based on NYC\'s OpenData information platform. The crimes have been weighted to reflect their severity. The resulting SketchLevel ranges from 0 (no crimes) to 2000+ (lots of severe crime activity).</p>').appendTo("#newResults")
$('#newResults').append('<h4 id="topFive">Can you beat these scores?:</h4><ul id="topList"></ul>')
for (i = 0; i < 5; i++){
var currentTopArea = topFiveArr[i]['area']
var currentTopRank = topFiveArr[i]['rank']
$('#topList').append('<li style="color:white; font-size:1em;">' + currentTopArea + ': ' +'<span id="rankText">' + currentTopRank + '</span>' +'</li>')
}
var audio = new Audio('sound/gunsound.mp3')
audio.play();
if(sketchLevel <= 400) {
$('#dial').addClass('sketchlevel1')
}
if(sketchLevel > 400 && sketchLevel <= 800) {
$('#dial').addClass('sketchlevel2')
}
if(sketchLevel > 800 && sketchLevel <= 1400){
$('#dial').addClass('sketchlevel3')
}
if(sketchLevel > 1500 && sketchLevel <= 2000) {
$('#dial').addClass('sketchlevel4')
}
if(sketchLevel > 2000) {
$('#dial').addClass('sketchlevel5')
}
}
Since the keypress
event handler is bound to .location-form
, you need to unbind it from that element, not window
. 由于
keypress
事件处理程序绑定到.location-form
,因此需要将其与该元素(而不是window
解除绑定。 So it should be: 因此应该是:
$('.location-form').unbind("keypress");
Also, .off()
is preferable to .unbind()
, unless you need to be compatible with jQuery versions before 1.7. 另外,
.unbind()
比.unbind()
.off()
更可取,除非您需要与1.7之前的jQuery版本兼容。
I figured out how to stop it, although I still don't know why it was occurring in the first place. 尽管我仍然不知道为什么会首先发生,但我想出了如何阻止它。 The fix was this:
解决方法是:
var enabled = true;
displayResults(){
if (enabled) {
...the rest of the code here
enabled = false;
}
}
That said, it would be awesome if somebody else could figure out how/why it was getting around the input-disabled line and then continuing to post every 10 seconds or so. 就是说,如果其他人能够弄清楚它是如何/为什么绕过禁用输入的线然后每10秒钟左右继续发布一次,那就太了不起了。 Just so weird.
太奇怪了
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.