Jquery Scope Problems

Question

function drawLabel(labelsIndex) {

    // Check not deleted Label data:(DBID, text, styling, x, y, isDeleted)
    if (!labelData[labelsIndex][5]) {

    // Create
    var newLabel = $('<div id="label' + labelsIndex + '" style="font-size:' + (labelData[labelsIndex][6] * currentScale)  + 'px;z-index:9999;position:absolute;left:' + labelData[labelsIndex][3] + 'px;top:' + labelData[labelsIndex][4] + 'px;' + labelData[labelsIndex][2] + '">' + labelData[labelsIndex][1] + '</div>');
    $('#thePage').append(newLabel);

    // Click edit
    $('#label' + labelsIndex).dblclick(function() {
        if (!isDraggingMedia) {

            var labelText = $('#label' + labelsIndex).html();
            $('#label' + labelsIndex).html('<input type="text" id="labelTxtBox' + labelsIndex + '" value="' + labelText + '" />');

            document.getElementById('#label' + labelsIndex).blur = (function(index) {
                return function() {
                    var labelText = $('#labelTxtBox' + index).val();
                    $('#label' + index).html(labelText);
                };
            })(labelsIndex);

        }
    });   

The code is meant to replace a div's text with a textbox, then when focus is lost, the textbox dissapears and the divs html becomes the textbox value.

Uncaught TypeError: Cannot set property 'blur' of null
$.draggable.start.isDraggingMediaresources.js:27
c.event.handlejquery1.4.4.js:63

I think I'm getting a tad confused with the scope, if anyone could give me some points I'd appreciate it. It would also be good if someone could show me how to remove the blur function after it has been executed (unbind?)

Answer 1

document.getElementById('#label' + labelsIndex).blur is a javascript function and less jquery :) therefore the # hash there is just irrelevant.

$('#label'+labelsIndex).bind('blur',function (){
   //labelText value goes here //
});

EDIT

to be honest ur over complicating it :)

<div id="txt1">I am div</div>
<textarea id="txt2">I am text</textarea>


$('#edit_button').click(function (){
     var val =  $('#txt1').hide().html();// hide the div,then get value,
     $('#txt2').show().val(val);//show txtarea then put value of div into it
});

Do the opposite for $('#save_button');