title: jQuery Chosen: change event doesn't fire from AJAX call
body: <p>I'm using jQuery <a href="http://harvesthq.github.com/chosen/" rel="nofollow">Chosen</a> on my page and I want to run a function every time a new option is selected. The function hides all of the child <code>div</code>s in a parent <code>div</code>, then shows just the one that corresponds to the option that was selected.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="settings-select" data-placeholder="Choose&amp;hellip;" class="chzn-select"&gt;
      &lt;option value="setting1"&gt;Option 1&lt;/option&gt;
      &lt;option value="setting2"&gt;Option 2&lt;/option&gt;
      &lt;option value="setting3"&gt;Option 3&lt;/option&gt;
      &lt;option value="setting4"&gt;Option 4&lt;/option&gt;
      &lt;option value="setting5"&gt;Option 5&lt;/option&gt;
      &lt;option value="setting6"&gt;Option 6&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="settings-tabs"&gt;
      &lt;div id="setting1" class="tab"&gt;...&lt;/div&gt;
      &lt;div id="setting2" class="tab"&gt;...&lt;/div&gt;
      &lt;div id="setting3" class="tab"&gt;...&lt;/div&gt;
      &lt;div id="setting4" class="tab"&gt;...&lt;/div&gt;
      &lt;div id="setting5" class="tab"&gt;...&lt;/div&gt;
      &lt;div id="setting6" class="tab"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var settingsShow = function(){
      var showPanel = $("#settings-select").find('option:selected').val();
      $("#settings-tabs .tab").hide();
      $("#" + showPanel).fadeIn("fast");
      alert(showPanel);
  }
  
  $(document).ready(function(){
      $("#settings-tabs .tab").hide();
      $("#settings-select").chosen().change(settingsShow);
  });
  </code></pre>
  
  <p>All of this works fine so far – when the selected item is changed, <code>settingsShow</code> is called (and an alert displays just to confirm this).</p>
  
  <p>Now, I also have an AJAX call that changes the selected option when it completes:</p>
  
  <pre><code>$("#settings-select").val("setting1").trigger("liszt:updated");
  settingsShow();
  </code></pre>
  
  <p>Here's the problem: once the selected option is changed by the completed AJAX call, selecting the previously-selected option no longer fires the change event. For example:</p>
  
  <ol>
  <li>Select "Option 2": displays alert "option2"</li>
  <li>Perform AJAX call: upon completion, selects "Option 1" and displays alert "option1"</li>
  <li>Select "Option 2": nothing happens</li>
  </ol>
  
  <p>I know it's an issue with Chosen specifically because it works fine if I use a normal <code>select</code> instead (at step 3 above, I'll get an alert that says "option2", like I should). But as you can see, I'm using <code>.trigger("liszt:updated")</code> to update the <code>select</code> when the AJAX call changes the selected option, so I don't see why this doesn't work.</p>