Question

Okay, I might confuse some people who might be able to answer this question, I’ll set this in the manner that I understand. Please bear with me.

Let’s say I have an array of divs in this manner:

<div id="par1"><span>Text 1</span></div>
<div id="par2"><span>Text 1</span></div>
<div id="par3"><span>Text 1</span></div>
<div id="par4"><span>Text 1</span></div>

Then, I have a hidden div with a textbox that acts like an editor:

<div id="editor" style="display: hidden"><input id="uniqueID$textbox" type="text" /></div>

What I want to achieve in jQuery is to visually display the #editor div within the divs above when i click each div somewhat an editor. Instead of having seperate input boxes within those divs and displaying them when needed, I intend to just use one textbox for each.

I hope I explained my problem well and hope you guys can help

Answer 1

You might want to replace the <span> with an <input> element on click, like

$(function(){
  $('span').bind('click', function(){
     $(this).replaceWith($('<input/>', {
        id:       'newinp',
        type:     'text',
        focusout: function(){
           $(this).replaceWith('<span>' + $(this).val() + '</span>');
        }
     }));       
     $('#newinp').focus();
  });
});​

Working example: http://www.jsfiddle.net/qbDKN/