我正在研究一个功能:

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

最佳答案

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

$(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('');
});

10-04 23:03
查看更多