Question

单击注册按钮时，我试图从表单中获取值。

setupFormUI()和相关表单字段保存在变量
$($rego_form).on("submit", getRegistrationFormValue);被称为-处理程序应该能够访问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", getRegistrationFormValue);

} 
function getRegistrationFormValue() {
    // alert("asdasd");
    var name = $name.val();
    var age = $age.val();
    var department = $department.val();
    var position = $position.val();

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

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>

Answer 1

您需要将变量包含在范围内，可以使用匿名闭包作为回调来实现此目的。

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

}

Answer 2

可接受的答案的替代方法-为“处理程序”提供this和Function.prototype.bind()的有意义的上下文，或者仅使用ES6 class。

setupFormUI();

function setupFormUI() {
  var args = {
    $name: $("#name"),
    $age: $("#age"),
    $department: $("#department"),
    $position: $("#position"),
    $rego_form: $("#rego-form")
  }

  args.$rego_form.submit(getRegistrationFormValue.bind(args));

}

function getRegistrationFormValue(e) {
  var name = this.$name.val();
  var age = this.$age.val();
  var department = this.$department.val();
  var position = this.$position.val();

  console.log("----->", name, age, position, department);

  e.preventDefault();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="rego-form" action="#">
  <input id="name" value="John Doe" />
  <input id="age" value="37" />
  <input id="department" value="Some dept" />
  <input id="position" value="Debt collector" />

  <button type="submit">Submit</button>
</form>

Answer 3

这不是闭包，如果引用了setupFormUI中的变量，那就是闭包。

getRegistrationFormValue只是一个变量，其函数直接传递给事件触发器（并且是异步的），请注意，它不在setupFormUI中执行，也没有在{{ 1}} ，它在执行时与setupFormUI无关。

Mike Zinn的答案在setupFormUI中定义了一个匿名函数，该匿名函数又引用了setupFormUI 中的变量，该变量是一个闭包。

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

3 个答案: