Question

I’m using this bit of jQuery to append a text input field to a div after a checkbox is checked:

$('.sharewithfriends').on("click", ".manual-invite", function () {
        if ($('input[name=manual-invite]').is(':checked')) {
          $('<li style="margin-top:0;display:none"><input type="text" id="invite_email1" name="invite-email1" value="Add an E-Mail" onfocus="clearText(invite_email1);" onblur="fillText(invite_email1);"/><span><a class="add" href="">Add</a></span></li>').appendTo('#invite-emails').slideToggle();

}

All of that works fine, except for the onfocus and onblur events. They call the following simple functions, which are supposed to clear the field on focus and fill it with the default text on blur:

function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}

function fillText(thefield){
if (thefield.value=="")
thefield.value=thefield.defaultValue;
}

But when I click the field, I get an error saying “invite_email1 is not defined” even though it clearly is.

Anyone know what I need to do to get this to work?

Answer 1

You’re not referring to the right element.

Replace clearText(invite_email1); with clearText(this);.
Even better, bind event listeners instead of adding inline events.