javascript - 登录表单 jQuery 插件无法按预期工作

Question

我正在为登录表单编写一个 jQuery 插件，但“提交”按钮有问题。我的“提交”按钮点击功能永远不会被执行。

这是我的 jsfiddle 代码http://jsfiddle.net/c4jRx/1/

(function ($) {

$.fn.login = function (options) {
    options = $.extend({}, $.fn.login.config, options);

    return this.each(function () {
        var markup =  '<div>' +
                      '<form method="post" action="">' +    
                      '<table><tr><td><label>User Login</label></td></tr>' +
                      '<tr><td><input type="text" id="user_id" placeholder="Apple ID" required></td></tr>' +
                      '<tr><td><input type="password" id="password" placeholder="Password" required></td></tr>' +
                      '<tr><td><input type="submit" id="authenticate" value="Login to your account"></td></tr>' +
                      '</table>' +
                      '</form>' +
                      '</div>';
        return $(this).html(markup);
    });
    $('#authenticate').click(function() {
        debugger;
        var user = $('#user_id').val();
        var password = $('#password').val();
        console.log("User: " + user + "Password: " + password);
    });        
};


$.fn.login.config = {
    // set values and custom functions
};

}(jQuery));

Answer 1

我已经修改了你的小提琴并将它附加在这里。实际的问题是您在登录函数中编写了单击事件，并且在添加 html 后您编写了返回语句，因此单击事件没有被注册。这是解决方案。

把你的点击事件放在 document.ready 中，如下所示：

$(document).ready(function() {
            $('#loginScreen').login();
          $('#authenticate').click(function() {
                    var user = $('#user_id').val();
        var password = $('#password').val();
        console.log("User: " + user + "Password: " + password);
    });     
        }); 

这是您更新的小提琴：http: //jsfiddle.net/c4jRx/5/谢谢