Question

In my Rails 3 app I remove a <span> that I use as a placeholder on input with jQuery. If I submit the form and I have errors, the form reloads and the errors are shown. However, for the fields where there were errors, the <span> won’t clear on input because the <span> is no longer within the <div> containing the input. (This is due to the field_with_errors <div> added from the error.) How can I work around this and still remove the <span> despite field_with_errors?

Here’s my jQuery:

// placeholder label for text
$(function() {
    $("span.holder + input").keyup(function() {
        if($(this).val().length) {
            $(this).prev('span.holder').hide();
        } else {
            $(this).prev('span.holder').show();
        }
    });
    $("span.holder").click(function() {
        $(this).next().focus();
    });
});

My html with field_with_errors (jQuery doesn’t work):

<div class="holds email">
  <span class="holder">Email</span>
  <div class="field_with_errors">
    <input autocomplete="off" id="user_email" name="user[email]" size="38" type="text" value="">
  </div>
</div>

My html without field_with_errors (jQuery works):

<div class="holdsname">
  <span class="holder">Last name</span>
  <input autocomplete="off" class="inner" id="user_profile_attributes_last_name" name="user[profile_attributes][last_name]" size="18" type="text">
</div>

Answer 1

What about

$('.holds').find('input').keyup(function ()
{
    if ($(this).val().length)
    {
        $(this).closest('.holds').find('.holder').hide();
    }
    else
    {
        $(this).closest('.holds').find('.holder').show();
    }
});

$('span.holder').click(function ()
{
    $(this).parent().find('input').focus();
});

jsFiddle