title: Chosen JavaScript can't click/select on update dynamically
body: <p>I have a website where I need to filter a list of media types depending on the media family. ie: if <code>print</code> is chosen, it must only show options to do with print, if <code>digital</code> is chosen, it must only show options to do with digital stuff.</p>
  
  <p>I can update the list with new values, but then they are not clickable anymore?</p>
  
  <p>Here are the screenshots:</p>
  
  <p><img src="https://i.stack.imgur.com/Bt2Gj.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/cdm6Q.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/gF983.png" alt="enter image description here"></p>
  
  <p>I am already using: <code>$("#mec_id").trigger("liszt:updated");</code> where <code>mec_id</code> is the id of the select. Here is the HTML after the <code>media family</code> is chosen, when trying to click on the <code>media type</code> it does not give the option to click/select the option. In the code I have selected <code>print</code> because there is only one value for the dropdown there (to save space in the code).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="mec_id" class=" chosen-select" tabindex="-1" multiple="" style="width: 100%; display: none;" data-placeholder="Select Media Type" name="mec_id[]"&gt;
      &lt;option data-val="12" value="print"&gt;print&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="mec_id_chosen" class="chosen-container chosen-container-multi" style="width: 349px;" title=""&gt;
      &lt;ul class="chosen-choices"&gt;
          &lt;li class="search-field"&gt;
              &lt;input class="default" type="text" style="width: 132px;" autocomplete="off"   value="Select Media Type" tabindex="8"&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="chosen-drop"&gt;
          &lt;ul class="chosen-results"&gt;
              &lt;li class="active-result" data-option-array-index="12"&gt;print&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript/JQuery (function of the AJAX Success call):</p>
  
  <pre><code>   success: function (data) {
                  var ul = document.createElement('ul');
                  ul.className = "chosen-results";
                  for (var i = 0; i &lt; data.length; i++) {
                      if (i == 0) {
                          $('#media_types .chosen-drop').contents().remove();
                          $('#mec_id').contents().remove();
                      }
                      var text = data[i].text;
                      var li = document.createElement('li');
                      li.className = "active-result";
                      li.setAttribute('data-option-array-index', data[i].id);
                      li.innerHTML = text;
                      ul.appendChild(li);
                      // create options
                      var option = document.createElement('option');
                      option.setAttribute('data-val', data[i].id);
                      option.value = data[i].text;
                      option.text = data[i].text;
                      document.getElementById("mec_id").appendChild(option);
                  }
                  $('#mec_id_chosen .chosen-drop').append(ul);
                  $("#mec_id").trigger("liszt:updated");
              },
  </code></pre>