Error in jQuery showing id undefined

Question

I have a jQuery script which creates div in this fashion

function dump_template(src,close_div)
{
    var item_template = $('<img/>', {'id':'target','src':src});
    var first_text = $('<div/>', {'id':'first_text','class':'edit_text'});
    $(first_text).css({"left":"0px",
                        "top":"0px",
                        "color":"#fff",
                        "position":"relative",
                        "width":"auto",
                        "text-align":"center"});
    $(first_text).html('Demo First Text');


    var second_text = $('<div/>', {'id':'second_text','class':'edit_text'});
    $(second_text).css({"left":"0px",
                        "top":"0px",
                        "color":"#fff",
                        "position":"relative",
                        "width":"auto",
                        "text-align":"center"});
    $(second_text).html('Demo Second Text');                    


    $('#main_canvas').html(item_template);
    var width = $("#target").width();
    var height = $("#target").height();;
    $('#main_canvas').css({'height':height+'px','width':width+'px'});


    var drag_first_text = $('<div/>', {'id':'drag_first_text','class':'context-menu-text'});
    var drag_second_text = $('<div/>', {'id':'drag_second_text','class':'context-menu-text'});
    $(drag_first_text).css({"left":"20px",
                "top":"100px",
                "position":"absolute",
                "width":"auto",
                "z-index":"5",
                "text-align":"center",
                });
    $(drag_second_text).css({"left":"20px",
                "top":"150px",
                "position":"absolute",
                "width":"auto",
                "z-index":"5",
                "text-align":"center"});
    $(drag_first_text).append(first_text);
    $(drag_second_text).append(second_text);

    $('#main_canvas').append(drag_first_text).append(drag_second_text);

    $(drag_first_text).draggable({grid:[1,1]});
    $(drag_second_text).draggable({grid:[1,1]});
    HideModalPopup(close_div);
}

Now I have some code in jQuery like this:

var content = $(this).find('.edit_text').text();

var outside_div_id = $(this).id;
alert(outside_div_id);

var inside_div_id = $(this).find('.edit_text').id;
alert(inside_div_id);

Here in the above example of code, $(this) refers to the div with ids "drag_first_text" and "drag_second_text" corresponding to the selected div.

But alert(outside_div_id); and alert(inside_div_id); both gives me undefined.

How can I find the glitch?

Answer 1

You either need to convert that to native Element using get or using index or use attr("id")

var outside_div_id = $(this)[0].id; // or $(this).attr("id")
alert(outside_div_id);

Answer 2

There is no such thing as .id.

var outside_div_id = $(this).attr('id');
alert(outside_div_id);

var inside_div_id = $(this).find('.edit_text').attr('id');
alert(inside_div_id);

Let me know if you have any question.