在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"); 
}