inline editing with jquery text box seems like readonly?
<p>I am trying to do some inline editing using jquery. The problem i am having is when i create the input text, i cannot change the text. I can not even seem to get focus. It seems like its readonly or disabled. The  $( ".sr-label" ).live("click"  is still being called when i try to click in the text field. Do i need to do some kind of unbind or something?</p>

<p>Thanks for any help    </p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;span class='sr-label'&gt;label 1&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;&lt;span class='sr-label'&gt;label 2&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>my js looks like</p>

<pre><code>$( ".sr-label" ).live("click", function(event){    
     console.log("sr-label");
     var $item = $( this ),
     $target = $( event.target );
     var $pitem = $item.parent();
     newHTML  = '&lt;input id="label_'+$pitem.attr('id')+'" type="text" size="30" '+
                 ' value="'+$item.text()+'"&gt;&lt;input class="saveedit" '+
                 ' id="save_'+$pitem.attr('id')+'" type="button" value="save"&gt;'+
                 ' &lt;input id="canedit" type="button" value="cancel"&gt;';
     $item.html(newHTML);
     return false;
 });
</code></pre>

<p><a href="http://jsfiddle.net/NWcrv/1/" rel="nofollow">jsFiddle Example</a></p>
