Issue with CSS implemented using jquery
<p>I have create a jquery to convert <code>title</code> attribute of input to span with class <code>"field_title"</code>. when I click on input though span class hide but input field remains disabled. Issue is I can't enable the input field.</p>

<pre><code>&lt;div class="field"&gt;
  &lt;input type="text" name="email" class="w_def_text" title="Email*" /&gt;
  &lt;img class="error" width="27" height="27" src="images/error.jpg" alt="Error"&gt; 
&lt;/div&gt;

&lt;script&gt;
function init_fields() {    
    $('.w_def_text').each(function() {
        var text = $(this).attr('title');
        var html = '&lt;span class="field_title"&gt;' + text + '&lt;/span&gt;';
        $(this).parent().append(html);

        if($(this).val() == '') {
            $(this).hide();
            $(this).next().show();
        }
        else {
            $(this).css({'display' : 'block'});
            $(this).next().hide();
        }
    });

    $('.w_def_text').live('blur', function() {
        if($(this).val() == '') {
            $(this).hide();
            $(this).next().show();
        }
    });

    $('.w_def_text ~ span').live('click', function() {
        $(this).hide();
        $(this).prev().css({'display' : 'block'}).focus();
    });
}
&lt;/script&gt;
</code></pre>
