Issue with filtering on dynamically added elements

I have the following code to filter a UL list based on click on another UL.

I will append dynamically some more elements to the bs-glyphicons-list-sub list to be filtered and I need to modify my code for this.

$('.show-fields').click(function(e) {
  e.preventDefault();
  $('.subList').hide();
  var filter = $(this).data('filtro');
  if (filter == "tutti") {
    $('#closer').hide();
    $('.fieldsList').show();
    $('#closer').show();
    $('.subList').show();
  } else {
    $('#closer').hide();
    $('.fieldsList').show().not('li[data-tipo=' + filter + ']').hide();
    $('#closer').show();
    $('.subList').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bs-glyphicons">
  <ul class="bs-glyphicons-list">
    <li class="show-fields" data-filtro="tutti" data-html="true" title="Visualizza <b>tutti i campi</b>"><span class="glyphicon glyphicon-search"></span><span class="glyphicon-class">Tutti</span></li>
    <li class="show-fields" data-filtro="input" data-html="true" title="Campi basati su template <b>input</b>"><span class="glyphicon glyphicon-log-in"></span><span class="glyphicon-class">Input</span></li>
    <li class="show-fields" data-filtro="textarea" data-html="true" title="Campi su template <b>testo libero</b>"><span class="glyphicon glyphicon-unchecked"></span><span class="glyphicon-class">Testo libero</span></li>
    <li class="show-fields" data-filtro="opzioni" data-html="true" title="Campi su template <b>opzioni</b>"><span class="glyphicon glyphicon-th-list"></span><span class="glyphicon-class">Opzioni</span></li>
    <li class="show-fields" data-filtro="validato" data-html="true" title="Campi su template <b>input validati</b>"><span class="glyphicon glyphicon-filter"></span><span class="glyphicon-class">Input validati</span></li>
    <li data-html="true" title="Aggiungi un campo" data-toggle="modal" id="addField"><span class="glyphicon glyphicon-plus"></span><span class="glyphicon-class">Aggiungi un campo</span></li>
  </ul>
</div>

<ul class="bs-glyphicons-list-sub">
  <li class="fieldsList" data-tipo="input" data-label="Nome" data-value="1" data-description="Qual � il tuo nome di battesimo?" id="fields_nome">
    <span class="glyphicon glyphicon-log-in"></span><span class="glyphicon-class">Nome</span>
  </li>
  <li class="fieldsList" data-tipo="input" data-label="Cognome" data-value="2" data-description="Qual � il tuo cognome? Per le donne il cognome da nubile" id="fields_cognome">
    <span class="glyphicon glyphicon-log-in"></span><span class="glyphicon-class">Cognome</span>
  </li>
  <li class="fieldsList" data-tipo="validato" data-label="Mail" data-value="3" data-description="Indica la tua mail aziendale" id="fields_mail">
    <span class="glyphicon glyphicon-filter"></span><span class="glyphicon-class">Mail</span>
  </li>
  <li class="fieldsList" data-tipo="validato" data-label="Telefono" data-value="4" data-description="Telefono: Un campo testo di massimo 256 caratteri senza formato specifico" id="fields_telefono">
    <span class="glyphicon glyphicon-filter"></span><span class="glyphicon-class">Telefono</span>
  </li>
  <li class="fieldsList" data-tipo="validato" data-label="Codice fiscale" data-value="5" data-description="Codice fiscale: Un campo testo in formato codice fiscale italiano" id="fields_codice-fiscale">
    <span class="glyphicon glyphicon-filter"></span><span class="glyphicon-class">Codice fiscale</span>
  </li>
  <li class="fieldsList" data-tipo="validato" data-label="Data" data-value="6" data-description="Data: Un campo data generico in formato gg/mm/aaaa" id="fields_data">
    <span class="glyphicon glyphicon-filter"></span><span class="glyphicon-class">Data</span>
  </li>
  <li class="fieldsList" data-tipo="validato" data-label="Ora" data-value="7" data-description="Ora: Un campo ora generico in formato hh:mm" id="fields_ora">
    <span class="glyphicon glyphicon-filter"></span><span class="glyphicon-class">Ora</span>
  </li>
  <li class="fieldsList" data-tipo="validato" data-label="Cellulare" data-value="8" data-description="Il tuo cellulare aziendale" id="fields_cellulare-it">
    <span class="glyphicon glyphicon-filter"></span><span class="glyphicon-class">Cellulare</span>
  </li>
  <li class="fieldsList" data-tipo="validato" data-label="Cellulare internazionale" data-value="9" data-description="Cellulare internazionale: Un campo cellulare da minimo 12 massimo 15 cifre che richiede country code all'inizio (formato +############)"
    id="fields_cellulare-ex">
    <span class="glyphicon glyphicon-filter"></span><span class="glyphicon-class">Cellulare internazionale</span>
  </li>
  <li class="fieldsList" data-tipo="textarea" data-label="Indirizzo di domicilio" data-value="13" data-description="Indirizzo di domicilio: dove vivi abitualmente" id="fields_indirizzo2">
    <span class="glyphicon glyphicon-unchecked"></span><span class="glyphicon-class">Indirizzo di domicilio</span>

The line I need to modify is the following:

$('.fieldsList').show().not('li[data-tipo='+filter+']').hide();

where I need to include the elements that I appended after DOM ready. I know about delegated events, I know how to use .on(), what I don’t know is how to apply delegated events binding to the filter function here. The elements I click on are immutable so I don’t think that using .on() on the click event may lead to something useful.

Answer

What you are doing is: Add event handling to elements, which are available at the start ($('.show-fields').click()). DOM elements that are added later don’t trigger this event.

What you need to be doing is: Delegate the click event. By catching the event on the <ul> which is already there at startup and delegating the event handling to the <li> on which the event occurred, you also catch DOM elements inside the <ul> which are added later.

I also deleted the then branch of the if, because you can set the filter for tutti to the empty string and it will work automatically.

console.clear();


$('.show-fields-list').on('click', '.show-fields', function(e) {
  console.log(e)
  e.preventDefault();
  $('.subList').hide();
  var filter = $(this).data('filtro');
  $('#closer').hide();
  $('.fieldsList').show().not('li[data-tipo=' + filter + ']').hide();
  $('#closer').show();
  $('.subList').show();
});

$('#add-new-filter').on('click', function() {
  $('.show-fields-list').append($('<li class="show-fields" data-filtro="' + $('#add-new-filter-filter').val() + '">' + $('#add-new-filter-label').val() + '</li>'))
})

$('#add-new-option').on('click', function() {
  $('.fields').append($('<li class="fieldsList" data-tipo="' + $('#add-new-option-tipo').val() + '">' + $('#add-new-option-label').val() + '</li>'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="add-new-filter-filter" placeholder="filter">
<input id="add-new-filter-label" placeholder="label">
<button id="add-new-filter">Add new filter</button><br>

<ul class="show-fields-list">
  <li class="show-fields" data-filtro="">Tutti</li>
  <li class="show-fields" data-filtro="input">Input</li>
  <li class="show-fields" data-filtro="textarea">Testo libero</li>
  <li class="show-fields" data-filtro="opzioni">Opzioni</li>
  <li class="show-fields" data-filtro="validato">Input validati</li>
</ul>

<input id="add-new-option-tipo" placeholder="tipo">
<input id="add-new-option-label" placeholder="label">
<button id="add-new-option">Add new option</button><br>

<ul class="fields">
  <li class="fieldsList" data-tipo="input">
    Nome
  </li>
  <li class="fieldsList" data-tipo="input">
    Cognome
  </li>
  <li class="fieldsList" data-tipo="validato">
    Mail
  </li>
  <li class="fieldsList" data-tipo="validato">
    Telefono
  </li>
  <li class="fieldsList" data-tipo="validato">
    Codice fiscale
  </li>
  <li class="fieldsList" data-tipo="validato">
    Data
  </li>
  <li class="fieldsList" data-tipo="validato">
    Ora
  </li>
  <li class="fieldsList" data-tipo="new">
    New
  </li>
  <li class="fieldsList" data-tipo="validato">
    Cellulare
  </li>
  <li class="fieldsList" data-tipo="validato">
    Cellulare internazionale
  </li>
  <li class="fieldsList" data-tipo="textarea">
    Indirizzo di domicilio
  </li>
</ul>