创建一个变量以等于动态创建的DOM元素

Question

我正在处理一项功能：

var container      = $('#container'),
    line1          = $('#line1'),
    line2          = $('#line2'),
    line3          = $('#line3'),
    line4          = $('#line4'),
    postcode       = $('#postcode'),
    addressPicker  = $('#selector'),
    noneOfTheAbove = $('#noneOfTheAbove');

    $(document).on('click', '#noneOfTheAbove', function()
    {
        container.removeClass('hidden');

        noneOfTheAbove.addClass('noDisplayElementImportant');
        addressPicker.addClass('hidden');

        line1.val('');
        line2.val('');
        line3.val('');
        line4.val('');
        postcode.val('');
    });

唯一的问题是DOM在按钮点击时动态创建。因此，使用像这样的变量并不会对$（document）.ready（）起作用，因此它们不存在。如何将动态DOM元素分配给变量？它会是$(document).find('#idHere')吗？

由于

更新1

使vars全局然后是本地的（使用charlietfl回答）：

var container,
    line1,
    line2,
    line3,
    line4,
    postcode,
    addressPicker,
    noneOfTheAbove;

 $(document).on('click', '#noneOfTheAbove', function()
 {
     container      = $('#container');
     line1          = $('#line1');
     line2          = $('#line2');
     line3          = $('#line3');
     line4          = $('#line4');
     postcode       = $('#postcode');
     addressPicker  = $('#selector');
     noneOfTheAbove = $('#noneOfTheAbove');

     container.removeClass('hidden');

     noneOfTheAbove.addClass('noDisplayElementImportant');
     addressPicker.addClass('hidden');

     line1.val('');
     line2.val('');
     line3.val('');
     line4.val('');
     postcode.val('');
});

Answer 1

不要急于加载它们，因为它们是动态的。使用延迟加载，这意味着在需要时使用它们。

    var container,
    line1,line,.. ;
    $(document).on('click', '#noneOfTheAbove', function()
        {  
            container = $('#container');
            container.removeClass('hidden');

            ... // others

            ...
        });

Answer 2

在事件处理程序存在时定义这些变量

$(document).on('click', '#noneOfTheAbove', function() {

  var container = $('#container'),
    line1 = $('#line1'),
    line2 = $('#line2'),
    line3 = $('#line3'),
    line4 = $('#line4'),
    postcode = $('#postcode'),
    addressPicker = $('#selector'),
    noneOfTheAbove = $('#noneOfTheAbove');
  container.removeClass('hidden');

  noneOfTheAbove.addClass('noDisplayElementImportant');
  addressPicker.addClass('hidden');

  line1.val('');
  line2.val('');
  line3.val('');
  line4.val('');
  postcode.val('');
});