title: Jquery change event not triggring
body: <p>this is my code </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;DDL change &lt;/title&gt;
      &lt;script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function () {
              BindState();
              doit();
              $('#ddlState').on('change', function () {  //this method is not triggering..
                  $('.ddlCity').val(parseInt(4)).change();
              });
          });
          function BindCity() {
              $('.ddlCity').append('&lt;option value="1"&gt;one&lt;/option&gt;&lt;option value="2"&gt;Two&lt;/option&gt;&lt;option value="3"&gt;Three&lt;/option&gt;&lt;option value="4"&gt;Four&lt;/option&gt;&lt;option value="5"&gt;Five&lt;/option&gt;');
          };
          function BindState() {
              $('#ddlState').append('&lt;option value="1"&gt;one&lt;/option&gt;&lt;option value="2"&gt;Two&lt;/option&gt;&lt;option value="3"&gt;Three&lt;/option&gt;&lt;option value="4"&gt;Four&lt;/option&gt;&lt;option value="5"&gt;Five&lt;/option&gt;');
          };
          function doit() {
              $('#ddlState').val(parseInt(3)).change();
          };
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;select id="ddlState" onchange="BindCity()"&gt;
          &lt;/select&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;select class="ddlCity"&gt;&lt;/select&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>on change event is not triggering dynamically ,if i change drop down manually event will fire..
  kindly explain  me  what is the problem </p>