提醒 this.id 关键字返回未定义的 Javascript答案

【问题标题】：Alerting the this.id keyword returns undefined Javascript提醒 this.id 关键字返回未定义的 Javascript
【发布时间】：2013-10-10 15:56:49
【问题描述】：

我多次动态创建相同的输入框。当用户按下回车键时，它会调用一个函数。然后我用这段代码进行测试：

function insertComment(){
  alert($(this).attr('id'));
}

但它一直返回未定义。这是我用来创建类似输入框的语法：

$("#divToAppend").append("<input id='testID' type = 'text' class = 'formatCSS' style = 'margin-top:12px ; ' placeholder = 'Add Comment' onkeydown='if (event.keyCode == 13) insertComment()'></input>");

【问题讨论】：

您是否附加了具有相同 ID 的输入？你要知道每页只能有1个Id
请向我们展示更多代码
在事件属性中，将insertComment()改为insertComment.call(this)
您想从最后一个文本框还是从附加的文本框中获取 ID？
如果您不能提供相同的 id，我可以使用什么。我只需要存储在 id 中的值。

标签： javascript jquery html dynamic inputbox

【解决方案1】：

在调用方法时传递这个：

$("#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')); 
}

【讨论】：

不确定它是否有效，但在警报中它没有返回任何未定义的内容。
我认为这是有目的的

【解决方案2】：

当心this。这是一个疯狂的变量，在将其添加到代码中之前，您总是要三思而后行。

在我们调试之前，第一课是——

每个函数总是在上下文中调用，如果你不能告诉上下文，它就是 window 对象。

现在让我们分解一下这里发生了什么。

当用户在您的输入字段上按下一个键时，insertComment 会被调用。由于没有上下文，因此在窗口上下文中调用它。所以现在，在函数内部，你的this实际上指向window，并且没有定义window.attr('id')。

相当于调用window.insertComment where this == window。

如果你像这样修改你的代码 -

onkeydown='if (event.keyCode == 13) insertComment(this)'

function insertComment(x){
    alert(x.attributes.id);
}

这里，上下文仍将是window，即this 变量仍将指向window 对象，但input 元素本身将作为参数传递给insertComment 函数。

x 将引用该元素，您现在可以以老式的 javascript 方式提取 id 属性 - x.attributes.id

（或者使用 jQuery 方式，如果你愿意的话 - $(x).attr('id')）

【讨论】：

【解决方案3】：

检查一下：

HTML：

<div id="divToAppend">
  <input class="formatCSS" type="text" id="id_1">  

</div>

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


    }

});


});

也许它会有所帮助。 :)

看看它是否正常工作：http://jsfiddle.net/pN8P6/

【讨论】：

【解决方案4】：

您需要将值存储在 ID 中吗？（看来您的部分问题可能是您有多个相同的 id，这是非法的。）

怎么样：

$("#divToAppend")
  .append("<input type = 'text' class = 'formatCSS' style = 'margin-top:12px ; ' placeholder = 'Add Comment'></input>")
  .keydown(function() { insertComment('whatever') });

【讨论】：