电子邮件验证实时消息，电子邮件随机显示并保留

Question

I am trying to display the email typed in the email input field in a validation message. The input field also already checks my database for registered emails and then displays a message depending on the result. I then added this code from here.

The result is that the validator will return with its message, but with a blank span for the email. If I type a key, the email will show up for a split second and then disappear(due to the validator rechecking the database), yet the "Confirmation will be sent to" message will then come back but email span remains blank.

<script>
//echo typed in email
    $('#youremail').keydown(function() {
    $('#youremail-confirm').text($(this).val());
    });
//check if the current user is already taken
$('#youremail').keyup(function(){
    var user = $('#youremail').val();
    var userlength = document.getElementById("youremail").value.length;
    if(userlength >= 8 && userlength <= 60) {
        $('.checkemail').html("");
        $.ajax({
            type: "GET",
            url: "<?php bloginfo('template_url'); ?>/ajax/check-username.php",
            data: "user=" + user,
            success: function(data){
                $('.checkemail').html(data);
            }
        });
    };
});
</script>
    <div class="form-label">
        <label for="youremail">Email Address <i>*</i></label>
        <small class="checkemail"></small>
    </div>
    <div class="form-input">
        <input type="email" name="youremail" id="youremail" class="input longinput" value="<?php echo $youremail; ?>" />
    </div> <!-- email -->



<?php 
if (strlen($_GET['user']) > 3 && strlen($_GET['user']) <= 30) {
if (username_exists($_GET['user'])) { //sanitizing is done by WordPress
    echo '<span class="checkusererr">This email is already used. Please <label for="lger" style="font-weight:bold;cursor:pointer;">click here log in</label> or enter another one.</span>';
} else {
    echo '<span class="checkuserok">Confirmation with be sent to <span id="youremail-confirm" style="font-weight:bold;"></span></span>';
} 
} ?>

Answer 1

I think you need to bind your event to a container and then the event will bubble up to #youremail. In this case you would use the .form-input div. This is just an example of the concept:

$('.form-input').on('keydown', '#youremail', function ()
{
    $('#youremail-confirm').text($(this).val());
});