Событие смены jQuery не запускается динамически созданным элементом

Question

В настоящее время я экспериментирую с list.js и lodash для создания функциональности динамического фильтра в наборе результатов поиска. Основание кода разветвляется здесь:

http://codepen.io/waynehoover/pen/KBqhF

List.Js использует элементы на странице, чтобы создать набор данных, который затем может быть отфильтрован или отсортированный. Однако, поскольку это результаты поиска, я хочу сделать фильтры динамическими, чтобы отображались только критерии, которые присутствуют на странице.

В приведенном выше примере используется список с несколькими выборами, однако в моем примере я преобразовал их в флажки. Основная проблема, с которой я сталкиваюсь, заключается в том, что я динамически создаю свои флажки, они больше не запускают метод updateList() при изменении.

Я пробовал просто использовать метод .change() в JQuery, а также .on ("change", updateList()), но ни один из них не работает. Есть идеи?

Код и кодепень ниже.

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> 

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


}); 

Codepen

http://codepen.io/JasonEspin/pen/waKjxW

Заранее спасибо.

Answer 1

просто использовать, как это: [? Связывания событий на динамически создаваемые элементы]

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