title: jQuery $().change(Function() using an $.ajax Dialog
body: <p>I am opening a dialog which dynamically loads ajax content.  </p>
  
  <p>The dialog can be opened from multiple buttons (CT head, CT Chest, etc).  </p>
  
  <p>When the dialog opens there is a &lt; select > &lt; /select > menu with an event handler that listens for a .change to occur.  </p>
  
  <p>The problem I am having is that the .change isn't being triggered:</p>
  
  <pre><code>&lt;script&gt;
   $(document).ready(function(){
  
   $("button.ctIndicationList").change(function() {
       // alert('Value change to ' + $(this).attr('value')); &lt;-- this won't trigger
       $('#dialogResult').html("loading...");
       $.ajax({
         type: "POST",
         url: $(this).attr('value') + ".php",
         // data: "q=" + $("#q").val(),
         success: function(msg){
           $('#dialogResult').html(msg);
            // alert( "Data Saved: " + msg );
         }
       });        
  
  });
   $("#requestStudy").click(function() {
       alert('Your study has been ordered');
       $( "#dialog-form" ).dialog( "close" );
   });   
  $( "button.create-user" )
      .button()
      .click(function() {
           alert($(this).attr('value') + ".php");
          // $("input.create-user").change(function() {
              $.ajax({
                 type: "POST",
                 url: $(this).attr('value') + ".php",
                 // data: "q=" + $("#q").val(),
                 success: function(msg){
                   $('#dialogResult').html(msg);
                    // alert( "Data Saved: " + msg );
                 }
              });
               // $("#dialog-form").load($(this).attr('value') + ".php","?opt1=Cron&amp;opt2=Spron");
               // $("#dialog-form" ).dialog( "open" );
          //    });   
  
          $( "#dialog-form" ).dialog( "open" );
  });  
  $('#dialog-form').dialog({ bgiframe: true,
      height: 600,
      width: 800,
      autoOpen: false,
      modal: true,
      overlay: {
          backgroundColor: '#000',
          opacity: 0.5
      }                
   });  
  
   });
   &lt;/script&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>&lt;div&gt;
  &lt;div id="dialog-form" title="Radiology Requisition" style="display:none;"&gt;
  &lt;p class="validateTips"&gt;All form fields are required.&lt;/p&gt;
  &lt;form&gt;
  &lt;fieldset&gt;
      &lt;p&gt;Indication:
      &lt;select id="ctIndicationList" class="ctIndicationList"&gt;
      &lt;option value="ajaxheadInjury"&gt;head injury&lt;/option&gt;
      &lt;option value="ajaxstroke"&gt;stroke / TIA&lt;/option&gt;
      &lt;/select&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label for="email"&gt;Clinical History&lt;/label&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60" /&gt;&lt;/p&gt;
  &lt;p&gt;&lt;label for="email"&gt;Differential Diagnosis&lt;/label&gt;&lt;/p&gt;
  &lt;P&gt;1. &lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60" /&gt;
  &lt;p&gt;2. &lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60" /&gt;
  &lt;p&gt;3. &lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60" /&gt;
  &lt;p id="dialogResult"&gt;result is here&lt;/p&gt;
  &lt;p&gt;&lt;button id="requestStudy"&gt;Request Study&lt;/button&gt;&lt;p&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;p&gt;&lt;button class="create-user" value="formCThead"&gt;CT Head - minor head injury&lt;/button&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button class="create-user" value="formCTchest"&gt;CT Chest&lt;/button&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button class="create-user" value="formCTabdomen"&gt;CT Abdomen / Pelvis&lt;/button&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button class="create-user" value="formCTcarotid"&gt;CT Carotid Angiogram&lt;/button&gt;&lt;/p&gt;                  
  &lt;p&gt;&lt;button class="create-user" value="formCTcspine"&gt;CT c-spine&lt;/button&gt;&lt;/p&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>One of the formCT__.php files that dynamically loads into the dialog is below.. they all look similar.  You will notice that the &lt; select id="ctIndicationList" > is located here.  This is what I am trying to trigger.</p>
  
  <pre><code>&lt;form&gt;
  &lt;fieldset&gt;
      &lt;p&gt;Indication:
      &lt;select id="ctIndicationList"&gt;
          &lt;option value="ajaxheadInjury"&gt;head injury&lt;/option&gt;
          &lt;option value="ajaxstroke"&gt;stroke / TIA&lt;/option&gt;
      &lt;/select&gt;&lt;/p&gt;
      &lt;p&gt;&lt;label for="email"&gt;Clinical History&lt;/label&gt;&lt;/p&gt;
      &lt;p&gt;&lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60"&gt;&lt;/input&gt;&lt;/p&gt;
      &lt;p&gt;&lt;label for="email"&gt;Differential Diagnosis&lt;/label&gt;&lt;/p&gt;
      &lt;P&gt;1. &lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60"&gt;&lt;/input&gt;&lt;/p&gt;
      &lt;p&gt;2. &lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60"&gt;&lt;/input&gt;&lt;/p&gt;
      &lt;p&gt;3. &lt;input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60"&gt;&lt;/input&gt;&lt;/p&gt;
      &lt;p id="dialogResult"&gt;result is here&lt;/p&gt;
      &lt;p&gt;&lt;button id="requestStudy"&gt;Request Study&lt;/button&gt;&lt;p&gt;
  &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>