登录表单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之后，你写了return语句，所以点击事件没有被注册。这是解决方案。

把你的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/感谢