Javascript jQuery更改事件未在动态创建的元素上触发

我目前正在试验list.js和lodash，以便在一组搜索结果上生成动态过滤器功能。代码的基础从这里分叉：

Js使用页面上的元素创建一个数据集，然后可以对其进行过滤或排序。但是，由于这些是搜索结果，我希望使过滤器动态，以便只显示页面上存在的条件

上面的示例使用了一个多选列表，但是在我的示例中，我将这些列表转换为复选框。我现在遇到的主要问题是，我正在动态创建复选框，它们不再在更改时触发updateList（）方法

我曾尝试在JQuery和.on（“change”，updateList（））中简单地使用.change（）方法，但这两种方法似乎都不起作用。有什么想法吗

下面是代码和代码笔

HTML

<div id="users">
  <input class="search" placeholder="Search" />

  <div>
  Filter Name:
  <label><input type="checkbox" name="names" value="Jonny Wayne">Johnny Wayne</label>
  <label><input type="checkbox" name="names" value="Jonas">Jonas</label>
  <label><input type="checkbox" name="names" value="Martina">Martina</label>
  <label><input type="checkbox" name="names" value="Gustaf">Gustaf</label>
  </div>

  <div class="namesContainer"></div>
  <div class="dateContainer"></div>

  <ul class="list">
    <li>
      <h3 class="name">Jonny Wayne</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>    
    <li>
      <h3 class="name">Jonas</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.0/list.min.js"></script>

过滤器名称：
约翰尼·韦恩
乔纳斯
玛蒂娜
古斯塔夫


琼尼·韦恩
1986年



乔纳斯
1985年


乔纳斯
1985年


乔纳斯
1985年


玛蒂娜
1986年



古斯塔夫
1983年

Javascript

var options = { valueNames: [ 'name', 'born' ] };
var userList = new List('users', options);

var updateList = function(){
  var names = new Array();
  var dates = new Array();

  $("input:checkbox[name=names]:checked").each(function() {
       names.push($(this).val());
  });

  $("input:checkbox[name=dates]:checked").each(function() {
       dates.push($(this).val());
  });

  var values_date = dates.length > 0 ? dates : null;
  var values_name = names.length > 0 ? names : null;

  userList.filter(function(item) {
    return (_(values_date).contains(item.values().born) || !values_date) 
           && (_(values_name).contains(item.values().name) || !values_name)
  });
}

$(function(){
  updateList();
  $("input:checkbox[name=dates]").change(updateList);
  $("input:checkbox[name=names]").change(updateList);

  var all_born = [];
  var all_name = [];

  _(userList.items).each(function(item){
    all_born.push(item.values().born)
    all_name.push(item.values().name)  
  });

  _(all_born).uniq().each(function(item){
    $(".dateContainer").append('<label><input type="checkbox" name="dates" value="'+item+'">'+ item +'</label>')
  });


});

var-options={valueNames:['name'，'born']}；
var userList=新列表（“用户”，选项）；
var updateList=函数（）{
变量名称=新数组（）；
var dates=新数组（）；
$（“输入：复选框[name=names]：选中”）。每个（函数（）{
names.push（$（this.val（））；
});
$（“输入：复选框[名称=日期]：选中”）。每个（函数（）{
dates.push（$（this.val（））；
});
var values_date=dates.length>0？日期：空；
var values_name=names.length>0？名称：空；
userList.filter（函数（项）{
return（u（values_date）.contains（item.values（）.born）| |！values_date）
&&（40;值_名称）.contains（item.values（）.name）| |！值_名称）
});
}
$（函数（）{
updateList（）；
$（“输入：复选框[名称=日期]”）。更改（updateList）；
$（“输入：复选框[name=names]”）；
var all_born=[]；
var all_name=[]；
_（userList.items）。每个（函数（项）{
所有\u born.push（item.values（）.born）
all_name.push（item.values（）.name）
});
_（所有）。uniq（）。每个（函数（项）{
$（“.dateContainer”）.append（“”+项+“”）
});
});

Codepen

提前感谢。

请这样使用：

 $(document).off("change","input:checkbox[name=dates]");
 $(document).on("change","input:checkbox[name=dates]",updateList);
 $(document).off("change","input:checkbox[name=names]");
 $(document).on("change","input:checkbox[name=names]",updateList);

---

可能您需要这一点，为什么在jQuery已初始化的情况下在开始时附加文档？当您在dom中动态添加任何元素时，您不能触发类似$（“输入：复选框[name=dates]”）的事件。更改（updateList）。因此，您必须将事件与动态更改的文档或父元素绑定。我想你已经得到答案了。太好了。谢谢你的帮助。