Пытаетесь реализовать замыкание в обработчике событий? Ошибка: не определено

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

Альтернатива принятому ответу - дать «обработчику» значимый контекст 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 2

Это не замыкание, если ссылка на переменную в setupFormUI является закрытием.

getRegistrationFormValue - это просто переменная, функция которой передается непосредственно в триггер события (и является асинхронной), обратите внимание, что она не выполняется в setupFormUI и не определяется в setupFormUI , Когда он выполняется, он не имеет ничего общего с setupFormUI.

Ответ Майка Зинна определяет анонимную функцию в setupFormUI, которая, в свою очередь, ссылается на переменную в setupFormUI, которая является замыканием.

Answer 3

Чтобы переменные находились в области видимости, вы можете использовать анонимное закрытие в качестве обратного вызова для достижения этой цели.

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

}