简体   繁体   中英

blur() and focus() not working on jQuery with replaceWith()

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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM