blur（）和focus（）在带有replaceWith（）的jQuery上不起作用

Question

I'm working on a form with jQuery that when you click on a certain field, it will display tips on what to do in that field in a

tag. With the code I have now, it will work for the first element, but then after that if I try to click another one it will not overwrite the previous change. I tried to use empty() on blur but that won't clear anything out, and I don't know if that would really solve the problem anyway. If anybody could give me any insight with what's wrong here I would really appreciate it!

#helpP is the paragraph that I want to change text within. The other IDs are just form fields.

$(document).ready(function () {
    $("#mail").focus(function() {
        $("#helpP").replaceWith("<p>This e-mail address will be used as your login and for receiving special offers from Volga</p>");
    }).blur(function(){
        $("helpP").empty();
    });

    $("#confirmEmail").focus(function() {
        $("#helpP").replaceWith("<p>Confirm your e-mail</p>");
    });

    $("#confirmEmail").blur(function() {
        $("#helpP").empty();
    });

    $("#passwordReg").focus(function() {
        $("#helpP").replaceWith("<p>Passwords can only have letters and numbers and are case sensitive.</p>");
    });

     $("#passwordRegConfirm").focus(function() {
         $("#helpP").replaceWith("<p>Enter the same password again to ensure accuracy</p>");
     });
 });

I tried chaining with the first one to see if that made any difference, but it does not.

Answer 1

Don't use replaceWith() try to use html() like,

$("#mail").focus(function() {
    $("#helpP").html("<p>This e-mail address will be used as your login and for receiving special offers from Volga</p>");
}).blur(function(){
    $("#helpP").empty();// use # before id selector
});

From replaceWith() Docs,

Description: Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

And it your elements will be replaced with p elements