提醒 this.id 关键字返回未定义的 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19300677/
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
Alerting the this.id keyword returns undefined Javascript
提问by user2342875
I create the same inputbox a couple of times dynamically. When a user presses enter it calls a function. I then test with this code:
我动态地创建了几次相同的输入框。当用户按下回车键时，它会调用一个函数。然后我用这个代码测试：
function insertComment(){
alert($(this).attr('id'));
}
But it keeps returning undefined. Here is the syntax I use to create similiar input boxes:
但它一直返回未定义。这是我用来创建类似输入框的语法：
$("#divToAppend").append("<input id='testID' type = 'text' class = 'formatCSS' style = 'margin-top:12px ; ' placeholder = 'Add Comment' onkeydown='if (event.keyCode == 13) insertComment()'></input>");
回答by Vicky Gonsalves
Just pass this while calling method :
只需在调用方法时传递这个：
$("#divToAppend").append("<input id='testID' type = 'text' class = 'formatCSS' style = 'margin-top:12px ; ' placeholder = 'Add Comment' onkeydown='if (event.keyCode == 13) insertComment(this)'></input>");
function insertComment(this)
{
alert($(this).attr('id'));
}
回答by Apoorv Parijat
Beware of this. It is a crazy variable and you always, always want to think twice before adding it in your code.
当心this。这是一个疯狂的变量，在将它添加到代码中之前，您总是要三思而后行。
Before we debug, the first lesson is -
在我们调试之前，第一课是——
- Every function is always called in a context and if you can't tell the context, it is the
windowobject.
- 每个函数总是在上下文中调用，如果你不能告诉上下文，它就是
window对象。
Now let's breakdown what's going on here.
现在让我们分解这里发生的事情。
When a user presses a key on your input field, insertCommentis called. Since there is no context, it is called on the window context. So now, inside the function, your thisis actually pointing to window, and there's no window.attr('id')defined.
当用户在您的输入字段上按下一个键时，insertComment调用。由于没有上下文，因此在窗口上下文中调用它。所以现在，在函数内部，您this实际上指向的是window，并且没有window.attr('id')定义。
It is equivalent to calling window.insertCommentwhere this == window.
它相当于调用window.insertCommentwhere this == window。
If you modify your code like so -
如果你像这样修改你的代码 -
onkeydown='if (event.keyCode == 13) insertComment(this)'
function insertComment(x){
alert(x.attributes.id);
}
Here, the context will still be window, i.e thisvariable will still point to windowobject, but the inputelement itself will be passed as a parameter to the insertCommentfunction.
在这里，上下文仍然是window，即this变量仍然指向window对象，但input元素本身将作为参数传递给insertComment函数。
xwill refer to the element and you can now pull the idattribute in good old fashioned javascript way - x.attributes.id
x将引用该元素，您现在可以id以老式的 javascript 方式提取该属性 -x.attributes.id
(or in jQuery way, if you prefer - $(x).attr('id'))
（或以 jQuery 方式，如果您愿意 - $(x).attr('id')）
回答by Leo
Check this:
检查这个：
HTML:
HTML：
<div id="divToAppend">
<input class="formatCSS" type="text" id="id_1">
</div>
js & jquery
js 和 jquery
// For alert the ID
function insertComment(id){
alert(id);
}
$(document).ready(function(){
// Look for any event 'keydown' in any element which has a class 'formatCSS'
$(document).on('keydown','.formatCSS',function(e){
// If enter is pressed
if (e.keyCode == 13){
//Get the current ID
var text_id=$(this).attr('id');
//Split it to get the counter. The ID must be unique
var id=text_id.split('_');
//Add 1 to the counter
var counter=parseInt(id[1])+1;
// Build the new ID
var new_text_id="id_"+counter;
// Then, create the new input with the iD
$("#divToAppend").append("<input id='"+new_text_id+"' type = 'text' class = 'formatCSS' />");
// Last, alert the ID
insertComment(new_text_id);
}
});
});
Maybe it can help. :)
也许它可以提供帮助。:)
See it working: http://jsfiddle.net/pN8P6/
看到它工作：http: //jsfiddle.net/pN8P6/
回答by Matt Gibson
Do you need to store the value in the ID? (it seems that part of your problem might be that you've got multiple identical ids, which is illegal.)
您需要将值存储在 ID 中吗？（似乎您的问题的一部分可能是您有多个相同的 ID，这是非法的。）
How about:
怎么样：
$("#divToAppend")
.append("<input type = 'text' class = 'formatCSS' style = 'margin-top:12px ; ' placeholder = 'Add Comment'></input>")
.keydown(function() { insertComment('whatever') });
