Javascript 试图在事件处理程序上实现闭包？错误：未定义

我试图在单击register按钮时从表单中获取值

• setupFormUI（）

  和相关表单字段保存在变量中

• $（$rego_form）.on（“提交”，getRegistrationFormValue）-处理程序应该能够访问
  setupFormUI（）
  变量（闭包），但它似乎什么都不做

问题：

getRegistrationFormValue

不记录任何内容。我可以让它工作，如果我把参数传递给函数但我想使用 结束

html

<form id="rego-form">

    <div class="row">
        <div class="col-md-5">
            <div class="form-group">
                <label>Company (disabled)</label>
                <input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc.">
            </div>
        </div>
        <div class="col-md-3">
            <div class="form-group">
                <label>name</label>
                <input type="text" id="name" class="form-control" placeholder="name" value="michael">
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="exampleInputEmail1">Age</label>
                <input id="age" class="form-control" placeholder="age">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label>Department Name</label>
                <input type="text" id="department" class="form-control" placeholder="department" value="Marketing">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>Position</label>
                <input type="text" id="position" class="form-control" placeholder="position" value="social media manager">
            </div>
        </div>
    </div>

    <button type="submit" id="rego-user-btn" class="btn btn-info btn-fill pull-right">Register</button>
    <div class="clearfix"></div>
</form>

公司（残疾人）
名称
年龄
部门名称
位置
登记

如果需要变量在作用域中，可以使用匿名闭包作为回调来实现这一点

setupFormUI();


function setupFormUI() {
    var $name = $("#name");
    var $age = $("#age");
    var $department = $("#department");
    var $position = $("#position");
    var $rego_form = $("#rego-form");

    $rego_form.on("submit", function(){
      var name = $name.val();
      var age = $age.val();
      var department = $department.val();
      var position = $position.val();

     console.log("----->", name, age, position, department); 
   });   

} 

---

可接受答案的另一种选择-给“处理程序”一个有意义的

this

上下文，或者可能只是使用ES6

类

setupFormUI（）；
函数setupFormUI（）{
变量args={
$name:$（“#name”），
$age:$（“#age”），
$部门：$（“#部门”），
$位置：$（“#位置”），
$rego_表格：$（“#rego表格”）
}
args.$rego_form.submit（getRegistrationFormValue.bind（args））；
}
函数getRegistrationFormValue（e）{
var name=this.$name.val（）；
var age=this.$age.val（）；
var department=这个$department.val（）；
var position=this.$position.val（）；
控制台日志（“--->”，姓名，年龄，职位，部门）；
e、 预防默认值（）；
}

提交

这不是闭包，如果引用了

setupFormUI

中的变量，则它是闭包

getRegistrationFormValue

只是一个变量，其函数直接传递给事件触发器（并且是异步的），请注意，它不是在

setupFormUI

中执行的，也不是在

setupFormUI

中定义的，当它被执行时，它与

setupFormUI

无关

---

Mike Zinn的回答在

setupFormUI

中定义了一个匿名函数，该函数反过来引用

setupFormUI

中的变量，这是一个闭包。

只需在

setupFormUI

中定义

getRegistrationFormValue

？事件处理程序中的问题是，一旦“处理”了事件，值就会消失如果希望外部变量持久化，请随意指定它们。事件处理程序内部的问题是，一旦事件“处理”，值就会消失。您希望如何处理这些值？那会让我更清楚地知道该给你指什么方向。

setupFormUI();


function setupFormUI() {
    var $name = $("#name");
    var $age = $("#age");
    var $department = $("#department");
    var $position = $("#position");
    var $rego_form = $("#rego-form");

    $rego_form.on("submit", function(){
      var name = $name.val();
      var age = $age.val();
      var department = $department.val();
      var position = $position.val();

     console.log("----->", name, age, position, department); 
   });   

}