title: How to catch the event change of <select> of multiple when options added dynamically with jQuery?
body: <p>i need to catch the change event of a select <em>after i add an option</em>.
  As i do not want dublicate values to be entered from various controls on the page.
  I tried various ways to catch the event after my option is added on to the page.</p>
  
  <p>update : <strong>i want the change event to be fired after i add the option.(Not with the click to the select itself)</strong></p>
  
  <p>What i tried is below.</p>
  
  <pre><code>&lt;script src="/jquery-1.8.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $("#clickMe").click(function () {
                  $('#example').append('&lt;option value="foo"&gt;Foo&lt;/option&gt;');
              });
  
              $("#example").find("option").change(function () {
                  alert("changed1");
              });
  
              $("#example").on("change", function () {
                  alert('changed2');
              });
  
              $("#example option").on("change", function () {
                  alert('changed3');
              });
  
              $("#example").change(function () {
                  alert('changed4');
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;select id="example" multiple="multiple"&gt;
      &lt;/select&gt;
      &lt;button id="clickMe"&gt;
          Add an Option
      &lt;/button&gt;
  &lt;/body&gt;
  </code></pre>