登錄表單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/感謝