在jQuery模塊中事件默認不觸發

Question

我正在嘗試編寫一個jQuery腳本來存儲來自REST API服務的身份驗證令牌。我有一個工作代碼塊，但決定進行模塊化，使應用程序更具可擴展性。現在，看起來preventDefault部分不再有效。

  <form action="/" id="authorize"> 
        <label for="username">Username:</label><br /> 
        <input type="text" id="username" required /><br /> 
        <label for="password">Password:</label><br /> 
        <input type="password" id="password" required /><br /> 
        <input type="submit" value="Authorize" /><span id="isValid" class="checkContainer">&nbsp;</span> 
      </form><hr /> 
      <label for="serviceType" class="fieldDisabled">Method: </label> 
      <select id="serviceType" disabled> 
        <option></option> 
        <option value="option1">Option 1</option> 
        <option value="option2">Option 2</option> 
      </select> 

腳本作爲authorize.js單獨保存，並在模塊中調用如下：

  <script src="js/authorize.js"></script> 
      <script>       
        $(document).ready(function() {     
          Authorize.init(); 
        }); 
      </script> 

這裏的模塊本身：我一直在辛苦勞作了這個

  var s; 
      var Authorize = { 
        token: null, 
        settings: { 
          username: $("#username"), 
          password: $("#password"), 
          form: $("#authorize"), 
          validationIcon: $("#isValid"), 
          selector: $("#serviceType"), 
          selectorLabel: $("label[for='serviceType']"), 
          serviceSelector: $(".methodFieldDisabled"), 
          url: "redacted" 
        }, 
        init: function() { 
          s = Authorize.settings; 
          this.bindUIActions(); 
        }, 
        bindUIActions: function() { 
          s.form.submit(function(event) { 
            event.preventDefault(); 
            data = Authorize.buildJSON(s.username.val(), s.password.val()); 
            Authorize.getToken(json); 
          }); 
        }, 
        buildJSON: function(username, password) { 
          var data = {}; 
          data['grant_type'] = password; 
          data['username'] = username; 
          data['password'] = password; 
          return data; 
        }, 
        getToken: function(data) { 
          $.ajax({ 
            type: "POST", 
            url: s.url, 
            data: data, 
            success: function(json) { 
             Authorize.success(json); 
            }, 
            error: function(json) { 
             Authorize.error(json); 
            } 
          }); 
        }, 
        success: function(json) { 
          Authorize.token = json.accessToken; 
          Authorize.revealServiceSelector(); 
        }, 
        error: function(json) { 
          Authorize.hideServiceSelector(); 
        }, 
        revealServiceSelector: function() { 
          s.serviceSelector.hide(); 
          if(s.validationIcon.hasClass("invalid")) { 
            s.validationIcon.removeClass("invalid"); 
          } 
          selectorLabel.removeClass("fieldDisabled"); 
          selector.prop("disabled", false); 
          s.validationIcon.addClass("valid"); 
        }, 
        hideServiceSelector: function() { 
          s.serviceSelector.hide(); 
          if(s.validationIcon.hasClass("valid")) { 
            s.validationIcon.removeClass("valid"); 
          } 
          selectorLabel.addClass("fieldDisabled"); 
          selector.prop("disabled", "disabled"); 
          s.validationIcon.addClass("invalid"); 
        } 
      }; 

大概一天，似乎無法找到失敗點。提交表單時，它將重定向到服務器的根目錄，而不是按預期執行腳本。

Answer 1

您從操作中指向「\」，它是您的目錄的根目錄。而應將其指向包含要啓動的代碼的文件。

Answer 2

只是一些停止代碼的錯別字。提交是您的代碼未能完成的默認行爲。

使用調試器，看看在運行時錯誤（瞭解和愛你的F12調試工具在Chrome等！）：

1）你必須在下面的橫線錯誤的變量（JSON而不是數據）所以你得到一個錯誤：

bindUIActions: function() { 
    s.form.submit(function (event) { 
     event.preventDefault(); 
     data = Authorize.buildJSON(s.username.val(), s.password.val()); 
     Authorize.getToken(data);   // <<<<<<<<<<<<<<<<<<<<<<< 
    }); 

2）你還沒有把你的範圍（S）的一對夫婦的變量：

revealServiceSelector: function() { 
    s.serviceSelector.hide(); 
    if (s.validationIcon.hasClass("invalid")) { 
     s.validationIcon.removeClass("invalid"); 
    } 
    s.selectorLabel.removeClass("fieldDisabled"); 
    s.selector.prop("disabled", false); 
    s.validationIcon.addClass("valid"); 
}, 
hideServiceSelector: function() { 
    s.serviceSelector.hide(); 
    if (s.validationIcon.hasClass("valid")) { 
     s.validationIcon.removeClass("valid"); 
    } 
    s.selectorLabel.addClass("fieldDisabled"); 
    s.selector.prop("disabled", "disabled"); 
    s.validationIcon.addClass("invalid"); 
}