Question

我正在使用colorbox登录表单，并希望使用javascript验证密码/电子邮件字段。但是，我已分配给登录按钮的单击处理程序无论出于何种原因都不会触发。注意：我的js控制台中没有出现错误。我的点击处理程序如下所示：

$("#login-button").click(function () {

    $("#email-error").html("");
    $("#password-error").html("");
    $("#email-password-error").html("");

    var regex = new RegExp("/\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\Z/i");
    var count = 0;
    alert("hey")
    if ($("#user_email").val() == "") {
        $("#email-error").html("Email is required");
        count += 1;
    } else if (!(regex.test($("#user_email").val()))) {
        $("#email-error").html("Email format incorrect");
        count += 1;
    }

    if ($("#user_password").val() == "") {
        $("#password-error").html("Password is required");
        count += 1;
    }

    if ($("#user_password").val() == "" && ($("#user_email").val() == "" || !(regex.test($("#user_email").val())))) {
        $("#password-error").html("");
        $("#email-error").html("");
        $("#email-password-error").html("Invalid email/name/password combination");
        count += 1;
    }

    if (count == 0) {
        $("#login-submit").click();
    }

});

加载到颜色框中的文件如下所示：

<div class="padding txt-center">
     <h1 class="open-sans">LOG IN TO WEBSITE</h1> 
    <!--br/>
    < div class="wrap"> <a href="#" class="button txt-center bg-facebook">login with facebook</a>  <a href="#" class="button txt-center bg-twitter">login with twitter</a> 
        <br/>
        <br/> <i></i> 
        </div-->
</div>
<!--br/-->
<div class="padding sign-form txt-center">
    <!--h1 class="no-margin-bottom">Or Use Your Email</h1--> <a href="#" onclick="$.colorbox.next()" class="underline">Do not have an account?</a> 
    <br/>
    <br/>
    <%=f orm_for(resource, :as=>resource_name, :url => session_path(resource_name), :html => {:class=>"wrap center"}) do |f| %>
        <%=f.text_field :email, :placeholder=>'Email'%>
            <div class="error-notice" id="email-error"></div>
            <%=f.password_field :password, :placeholder=>'Password'%>
                <div class="error-notice" id="password-error"></div>
                <div class="txt-right"> <a href="#" class="forgot"><i>Forgot your password?</i></a>

                </div>
                <div class="error-notice" id="email-password-error"></div>
                <div class="button" style="width:22%;cursor:pointer;background-color:#F0F0F0;" id="login-button">LOGIN</div>
                <%if @host !='localhost' %>
                    <%=f.submit 'LOGIN', :class=>'button', :onclick =>"_gaq.push(['_trackEvent', 'Retention', 'Login']);"%>
                        <%else%>
                            <%=f.submit 'LOGIN', :class=>'button', :id=>"login-submit", :style=>"display:none;"%>
                                <%end%>
                                    <%end%>
</div>
<br/>

Answer 1

我设法通过将单击处理程序中的代码放在main.js中的函数中，然后将onClick html属性添加到登录按钮然后调用前面提到的函数来实现此功能。

像这样：

<span class="button" style="width:22%;cursor:pointer;background-color:#F0F0F0;" id="login-button" onClick="login_click();">LOGIN</span>

虽然我仍然很好奇为什么点击事件之前不会注册。是否与使用ajax加载的colorbox的文件有关？

单击处理程序不为jquery colorbox中的元素触发

1 个答案: