Alerting the this.id keyword returns undefined Javascript

Question

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

Answer 1

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

Answer 2

Beware of this. It is a crazy variable and you always, always want to think twice before adding it in your code.

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 window object.

Now let's breakdown what's going on here.

When a user presses a key on your input field, insertComment is called. Since there is no context, it is called on the window context. So now, inside the function, your this is actually pointing to window, and there's no window.attr('id') defined.

It is equivalent to calling window.insertComment where 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 this variable will still point to window object, but the input element itself will be passed as a parameter to the insertComment function.

x will refer to the element and you can now pull the id attribute in good old fashioned javascript way - x.attributes.id

(or in jQuery way, if you prefer - $(x).attr('id'))

Answer 3

Check this:

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


    }

});


});

Maybe it can help. :)

See it working: http://jsfiddle.net/pN8P6/

Answer 4

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

How about:

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