jQuery change event not firing on dynamically created element

Question

I'm currently experimenting with list.js and lodash to produce a dynamic filter functionality on a set of search results. The base of the code is forked from here:

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

List.Js uses the elements on the page to create a dataset that can then be filtered or sorted. However, as these are search results I want to make the filters dynamic so that only criteria that is present on the page is displayed.

The example above uses a multi-select list however in my example I have converted these to checkboxes. The main problem I have is now that I am creating my checkboxes dynamically they are no longer firing the updateList() method on change.

I have tried simply using the .change() method in JQuery and also .on("change",updateList()) but neither of these seem to work. Any ideas?

Code and Codepen below.

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

Thanks in advance.

May be you need this **[Event binding on dynamically created elements?](http://stackoverflow.com/q/203198/3639582)** — Shaunak D, May 06 '15 at 16:07

score 2 · Accepted Answer · answered May 06 '15 at 16:05

2

just use like this :

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

answered May 06 '15 at 16:05

Sumit Jha

370
1
5
11

Why are you affixing document at the start when jQuery has already been initialised at this point? – jezzipin May 06 '15 at 16:10
When you add any element dynamically in dom then you can not fire event like $("input:checkbox[name=dates]").change(updateList). so you have to bind event with document or parent element which is nit dynamically changed. I think you got your answer. – Sumit Jha May 06 '15 at 16:18

jQuery change event not firing on dynamically created element

1 Answers1