Оповещение по ключевому слову this.id возвращает неопределенный Javascript

Остерегайтесь this. Это сумасшедшая переменная, и вы всегда, всегда хотите дважды подумать, прежде чем добавлять ее в свой код.

Прежде чем отлаживать, первый урок -

• Каждая функция всегда вызывается в контексте, и если вы не можете определить контекст, это объект window.

Теперь дайте понять, что происходит здесь.

Когда пользователь нажимает клавишу в вашем поле ввода, insertComment. Поскольку контекст отсутствует, он вызывается в контексте окна. Итак, теперь внутри этой функции this на самом деле указывает на window, и там нет window.attr('id').

Это эквивалентно вызову window.insertComment где this == window.

Если вы измените свой код так,

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

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

Здесь контекст будет по-прежнему быть window, то есть this переменная все равно будет указывать на объект window, но сам input элемент будет передан как параметр функции insertComment.

x будет ссылаться на элемент, и теперь вы можете потянуть атрибут id в старом стиле javascript - x.attributes.id

(или в jQuery образом, если вы предпочитаете - $(x).attr('id'))

Проверь это:

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/

Вам нужно сохранить значение в ID? (кажется, что часть вашей проблемы может заключаться в том, что у вас есть несколько идентичных идентификаторов, что является незаконным).

Как насчет:

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