代码之家 › 专栏 › 技术社区 › billy

尝试在事件处理程序上实现闭包?错误:未定义

closures event-handling javascript-events javascript

billy · 技术社区 · 7 年前

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

setupFormUI() 相关表单字段保存在变量中
$($rego_form).on("submit", getRegistrationFormValue); 调用-处理程序应该能够访问 SuffUpFuffi() 变量(闭包),但它似乎不起任何作用

问题 : 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>

3 回复 | 直到 7 年前

Mike Zinn 7 年前

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

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

}

Yom T. 7 年前

接受答案的另一种选择给“处理人”一个有意义的上下文 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>

yujinpan 7 年前

如果变量 setupFormUI 被引用,它是一个闭包。

getRegistrationFormValue 只是一个变量,其函数直接传递给事件触发器(并且是异步的)。 请注意,它不是在 设置窗体 ,也没有在 设置窗体 ,当它被执行时,它与 设置窗体 .

Mike Zinn的回答 在中定义匿名函数 设置窗体 ,它依次引用 设置窗体 ,这是一个结束。