Question

I am opening a dialog which dynamically loads ajax content.

The dialog can be opened from multiple buttons (CT head, CT Chest, etc).

When the dialog opens there is a < select > < /select > menu with an event handler that listens for a .change to occur.

The problem I am having is that the .change isn’t being triggered:

<script>
 $(document).ready(function(){

 $("button.ctIndicationList").change(function() {
     // alert('Value change to ' + $(this).attr('value')); <-- 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&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
    }                
 });  

 });
 </script>

…

<div>
<div id="dialog-form" title="Radiology Requisition" style="display:none;">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
    <p>Indication:
    <select id="ctIndicationList" class="ctIndicationList">
    <option value="ajaxheadInjury">head injury</option>
    <option value="ajaxstroke">stroke / TIA</option>
    </select></p>
<p><label for="email">Clinical History</label></p>
<p><input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60" /></p>
<p><label for="email">Differential Diagnosis</label></p>
<P>1. <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60" />
<p>2. <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60" />
<p>3. <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60" />
<p id="dialogResult">result is here</p>
<p><button id="requestStudy">Request Study</button><p>
</fieldset>
</form>
</div>

<p><button class="create-user" value="formCThead">CT Head - minor head injury</button></p>
<p><button class="create-user" value="formCTchest">CT Chest</button></p>
<p><button class="create-user" value="formCTabdomen">CT Abdomen / Pelvis</button></p>
<p><button class="create-user" value="formCTcarotid">CT Carotid Angiogram</button></p>                  
<p><button class="create-user" value="formCTcspine">CT c-spine</button></p>

</div>

One of the formCT__.php files that dynamically loads into the dialog is below.. they all look similar. You will notice that the < select id=”ctIndicationList” > is located here. This is what I am trying to trigger.

<form>
<fieldset>
    <p>Indication:
    <select id="ctIndicationList">
        <option value="ajaxheadInjury">head injury</option>
        <option value="ajaxstroke">stroke / TIA</option>
    </select></p>
    <p><label for="email">Clinical History</label></p>
    <p><input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60"></input></p>
    <p><label for="email">Differential Diagnosis</label></p>
    <P>1. <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60"></input></p>
    <p>2. <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60"></input></p>
    <p>3. <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" size="60"></input></p>
    <p id="dialogResult">result is here</p>
    <p><button id="requestStudy">Request Study</button><p>
</fieldset>
</form>

Answer 1

You need to delegate your handler since the target element does not exist when the page loads, also you have button.ctIndicationList for you selector instead of select.ctIndicationList

$(document/* or some container element */).on('change', "select.ctIndicationList", function() {
    // alert('Value change to ' + $(this).attr('value')); <-- 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 );
        }
    });        
});