javascript - jQuery .blur() 不适用于动态生成的字段

Question

我正在处理一个登录表单，它也有注册表。电子邮件字段是使用 jQuery 动态生成的。

我在字段下方有标签，因此我可以将它们放在字段内。当该字段处于焦点上或其中有内容时，标签会移动到该字段上方。

但是，所有这些都适用于用户名和密码，但不适用于电子邮件。不知道为什么。

这是代码笔:

http://codepen.io/andornagy/pen/waoyZB

$(document).ready(function(){

    var inp = $('#emailhere');
    var i = 0;
    var emailField = $('<section class="emailc"><input type="email" name="email" id="email" class="field"><label for="email" class="email">E-mail</label></section');

    // Do stuff when you click to show register form
    $('ul.tabs li.register').click(function(){

        $('#do').val('register');

        $('.button').val('Register');

        if ( i < 1 ) {

            $('#emailhere').after(emailField);

        };

    });

    // Do stuff when you click to show login form
    $('ul.tabs li.login').click(function(){

        $('.emailc').remove();

        var i = 0;

        $('#do').val('login');

        $('.button').val('Login');

    }); 

    // Moving the input labels correctly.
    $('#login').on("blur", "input",function() {

        // Make the label stay above if the field is not empty.
        if( this.value ) {
            $(this).next().addClass('notEmpty');
        }

        // Make the label go back on the field if the field is empty.
        if( !this.value ) {
            $(this).next().removeClass('notEmpty');
        }

    });

});

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);

body {
    margin: 0;
    padding: 0;
    background-color: #4A5043;
    font-family: 'Roboto Slab', serif;
}

.clear:after {
    display: block;
    content:" ";
    clear: both;
}

/* The Base container styles
===================================*/

.tabs {
    display: block;
    margin: -25px -25px 40px -25px;
    padding: 0;
    border-bottom: 3px solid #FFFFFF;
}

.tabs li {
    display: block;
    list-style: none;
    float: left;
    width: 125px;
    margin: 0;
    padding: 15px 25px 19px 25px;
    font-size: 22px;
    color: #FFFFFF;
    text-align: center;
}

.tabs .login {
    border-right: 1px solid #FFFFF;
}

#form {
    width: 300px;
    margin: 150px auto;
    background-color: #5C505A;
    padding: 25px;
}

#form .field {
    display: block;
    padding: 10px;
    font-size: 22px;
    margin-top: 14px;
    border: 3px solid #FFFFFF;
}

#form .button:focus,
#form .field:focus {
    outline: none;
    border-color:; #000000;
}

#form .field + label {
    position: relative;
    bottom:42px;
    padding: 10px;
    font-size: 22px;
    color: #5C505A;
    z-index: 999;
}

#form .field + .notEmpty,
#form .field:focus + label {
    bottom: 88px;
    color: #FFFFFF;
}

#form label:focus + label {
    bottom: 0;
    color: #5C505A;
}

#form .button,
#form .button:hover,
#form .field + label,
#form .field:focus + label {
    transition: 0.5s bottom,
                0.5s color,
                0.5s border-color,
                0.5s background-color;
}

#form .button {
    display: block;
    width: 294px;
    padding: 10px;
    font-size: 22px;
    border: 3px solid #FFFFFF;
    background:none;
    color: #FFFFFF;
}

#form .button:hover {
    color: #5C505A;
    background:#FFFFFF;
}

<!-- #form container -->
<section id="form">

    <ul class="tabs clear">
        <li class="login">Login</li>
        <li class="register">Register</li>
    </ul>
    <!-- #login container -->
    <section id="login">

        <!-- Login form -->
        <form name="login" action="#">

            <!-- Username field -->
            <p>
            <input type="text" name="username" id="username" class="field">
            <label for="username">Username</label>
</p>
            <div id="emailhere"></div>

            <!-- Password field -->
            <input type="password" name="password"id="password" class="field">
            <label for="password">Password</label>

            <!-- hidden value for validation -->
            <input type="hidden" id="do" name="do" value="login">       

            <!-- submit button -->
            <input type="submit" class="button" name="submit" value="Login">

        </form><!-- /ends Login form -->

    </section><!-- #login ends -->

    <!-- #register container -->
    <section id="register">

    </section><!-- #register ends -->

</section><!-- #form ends -->

Answer 1

看着你的代码，试试...

$('#login').on("blur", "input", function() {

...而不是...

$('#login input').blur(function() {

您的问题很可能是当您的代码将模糊放置到位时动态字段不存在...因为 #login 存在，所以可以在动态添加时定位输入。

因此，查看 on 函数，它针对非动态的 #login 运行，并且 blur 与任何 匹配code>input 标记是在命令运行之前存在还是在命令运行之后添加的。基本上，这就像使用 jQuery 的 find 寻找 inputs。

这样，代码“附加”到 #login，但会监视任何 input 标记，而不管它们是何时创建的。