title: onChange event does not get called
body: <p>I have this change function that removes or adds the hidden class to a razor dropdownlist. 
  This checks if a value in one of the dropdowns is that string, then on change, either remove or add the class based on that selection. </p>
  
  <pre><code>&lt;label class="control-label col-md-4 optional" id="PIdsLabel" for="pIds"&gt;PIds&lt;/label&gt;
  @Html.DropDownList("PIds", allPlacements, new { htmlAttributes = new { @multiple = true, @data_placeholder = "Select", @class = "form-control no-chosen hidden"}})
  
  
  &lt;label class="control-label col-md-4 optional" id="FLabel" for="FType"&gt;FType&lt;/label&gt;
  @Html.DropDownList("FType", Enum.GetValues(typeof(FType)).Cast&lt;FType&gt;().Select(o =&gt; new SelectListItem { Text = o.GetDescription(), Value  = o.ToString()}), new { htmlAttributes = new { @multiple = true, @data_placeholder = "Select", @class = "form-control no-chosen hidden"}})
  
  @section Scripts
  {
      @Scripts.Render("~/js/index-layout")
      &lt;script type="text/javascript"&gt;
  
      function linkify() 
      {
          jQuery.event.trigger('linkify');
      }
  
      (function() {
          $(document)
              .ready(function() 
              {
  
                  var $typeCell = $('&lt;td&gt;&lt;/td&gt;');
  
                  var $typeField = $('&lt;select&gt;&lt;/select&gt;')
                      .attr('class', 'text-box single-line form-control')
                      .attr('id', 'PType')
                      .attr('name', 'PCs[0].PType');
  
  
                  @foreach (var item in allPTypes)
                  {
                      @:$typeField.append($('&lt;option&gt;').attr('value', "@item").text('@(((PType) item).ToString().Replace("_", " "))'));
                  }
  
                  $typeCell.append($typeField);
  
                  $('#PType').change(function (e) 
                  {
  
                      if ($('#PType').val() == "Conditional_Locked") 
                      {
                          alert("Hello");
                          $('#FType_chosen').removeClass('hidden');
                          $('#FTypeLabel').removeClass('hidden');
                          $('#PIds_chosen').removeClass('hidden');
                          $('#PIdsLabel').removeClass('hidden');
                      } 
                      else 
                      {
                          alert("Bye");
                          $('#FType_chosen').addClass('hidden');
                          $('#PIds_chosen').addClass('hidden');
                          $('#FTypeLabel').addClass('hidden');
                          $('#PIdsLabel').addClass('hidden');
                      }
                  });
  
  
          $(document)
              .bind('linkify',
                  function() 
                  {
                      doLinkify($elements.$resultDetailView);
                  });
          });
      })();           
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>Problem is the change event is never fired. Why? </p>
  
  <pre><code>.hidden {
      display: none;
  }
  </code></pre>
  
  <p>I tried to run the snippet with the change event inside the browser console window and it works fine. I added the alerts to see if they fire and it runs fine when I run it straight from console window. Not when the page loads and the selection changes are not detected (unless I run into directly into console). </p>