为什么 Onblur 不起作用（JQuery/Javascript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7682247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is Onblur not working (JQuery/Javascript)
提问by algorithmicCoder
I have the following input field for which i want to pull suggestions when a user types:
我有以下输入字段，我想在用户键入时为其提取建议：
<input type = 'text' name= 'target' id='target' style='width:150px' onblur ='setTimeout('removeSuggestions()', 20);' onkeyup ='getSuggestions(this.value);'/>
There is a "suggestions" div below it and I am using the following javascript.
它下面有一个“建议”div，我正在使用以下 javascript。
function getSuggestions(value){
if (value !=""){
$.post("target.php", {targPart:value}, function(data) {
$("#suggestions").html(data);
if(value.length>2){
doCSS();
}
});
} else {
removeSuggestions();
}
}
function removeSuggestions(){
$("#suggestions").html("");
undoCSS();
}
function addText(value){
$("#target").val(value);
}
function doCSS(){
$("#suggestions").css({
'border' : 'solid',
'border-width': '1px'
});
}
function undoCSS(){
$("#suggestions").css({
'border' : '',
'border-width': ''
});
}
I figure that when i click outside the field....the suggestions div should vanish or do i have to do it more explicitly?
我认为当我在字段外单击时......建议 div 应该消失还是我必须更明确地做？
Thanks!
谢谢！
回答by Jason Dean
Your problem is here:
你的问题在这里：
<input type = 'text' name= 'target' id='target' style='width:150px' onblur ='setTimeout('removeSuggestions()', 20);' onkeyup ='getSuggestions(this.value);'/>
For some reason you are using single quotes to surround your attribute values, but then you are also using it to surround your function call in setTimout(). So when the browser parses it, it stops the attribute at
出于某种原因，您使用单引号将属性值括起来，但随后您也使用它来将 setTimout() 中的函数调用括起来。所以当浏览器解析它时，它会将属性停止在
onblur ='setTimeout('
And you get JS errors.
你会收到 JS 错误。
Use double quotes to surround your HTML attributes.
使用双引号将 HTML 属性括起来。
<input type = "text" name= "target" id="target" style="width:150px" onblur ="setTimeout('removeSuggestions()', 20);" onkeyup = "getSuggestions(this.value);"/>
Also, that's not the best way to use setTimout(). Use an anonymous function instead.
此外，这不是使用 setTimout() 的最佳方式。改用匿名函数。
Also, binding event listeners inline is not a best practice. Instead use unobtrusive JavaScript.
此外，内联绑定事件侦听器不是最佳实践。而是使用不显眼的 JavaScript。
$(function(){
$('#target').blur(function(e) {
setTimeout(function(){
removeSuggestions()
}, 20);
});
$('#target').keyup(function(e) {
getSuggestions(e.target.value);
});
});
hope that helps
希望有帮助
回答by Billy Moon
you have got your single quotes inside other single quotes:
你在其他单引号内有你的单引号：
onblur ='setTimeout('removeSuggestions()', 20);'
should read
应该读
onblur='setTimeout("removeSuggestions()", 20);'
Also, I would recommend not putting spaces between HTML tag attributes and their values (see comment), it might cause issues on some browsers with strict parsers.
另外，我建议不要在 HTML 标记属性和它们的值之间放置空格（请参阅注释），这可能会导致某些具有严格解析器的浏览器出现问题。
回答by Kai
<input type = 'text' name= 'target' id='target' style='width:150px' onblur ="setTimeout('removeSuggestions()', 20);" onkeyup ='getSuggestions(this.value);'/>
Since removeSuggestions should be treated as literal , and hence, you should use double quote for the attribute values.
由于 removeSuggestions 应该被视为literal，因此，您应该对属性值使用双引号。
