Question

我正在登录表单上工作，该表单也有注册表单。电子邮件字段是使用jQuery动态生成的。

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

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

这是代码笔：

Repository git@heroku.com:protected-garden-XXXX.git

pre-receive hook declined
Compressing source files... done.
Building source:

-----> Java app detected
-----> Installing OpenJDK 1.6... done
-----> Installing Maven 3.3.1... done
-----> Executing: mvn -B -DskipTests=true clean install
Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apache/maven/cli/MavenCli : Unsupported major.minor version 51.0
    at java.lang.ClassLoader.defineClass1(Native Method)
    at java.lang.ClassLoader.defineClass(ClassLoader.java:634)
    at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:142)
    at java.net.URLClassLoader.defineClass(URLClassLoader.java:277)
    at java.net.URLClassLoader.access$000(URLClassLoader.java:73)
    at java.net.URLClassLoader$1.run(URLClassLoader.java:212)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.net.URLClassLoader.findClass(URLClassLoader.java:205)
    at org.codehaus.plexus.classworlds.realm.ClassRealm.loadClassFromSelf(ClassRealm.java:401)
    at org.codehaus.plexus.classworlds.strategy.SelfFirstStrategy.loadClass(SelfFirstStrategy.java:42)
    at org.codehaus.plexus.classworlds.realm.ClassRealm.unsynchronizedLoadClass(ClassRealm.java:271)
    at org.codehaus.plexus.classworlds.realm.ClassRealm.loadClass(ClassRealm.java:254)
    at org.codehaus.plexus.classworlds.realm.ClassRealm.loadClass(ClassRealm.java:239)
    at org.codehaus.plexus.classworlds.launcher.Launcher.getMainClass(Launcher.java:144)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced(Launcher.java:266)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launch(Launcher.java:229)
    at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode(Launcher.java:415)
    at org.codehaus.plexus.classworlds.launcher.Launcher.main(Launcher.java:356)

 !     ERROR: Failed to build app with Maven
       We're sorry this build is failing! If you can't find the issue in application code,
       please submit a ticket so we can help: https://help.heroku.com/


 !     Push rejected, failed to compile Java app

Verifying deploy...

!   Push rejected to protected-garden-XXXX.

$(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;
}

Answer 1

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

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

......而不是......

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

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

因此，查看on函数时，它会针对#login运行，而blur不是动态的，input与任何find标记匹配，无论它们是否存在之前或在命令运行后添加。基本上，就像使用jQuery的inputs寻找#login。

这样，代码就会“附加”到input，但会关注任何{{1}}代码，无论它们何时被创建。

jQuery .blur（）不处理动态生成的字段

1 个答案: