0

我正在打开一个动态加载 ajax 内容的对话框。

该对话框可以从多个按钮（CT 头、CT 胸等）打开。

当对话框打开时，会有一个 <select> </select> 菜单，其中包含一个事件处理程序，用于侦听发生的 .change。

我遇到的问题是 .change 没有被触发：

<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>

下面是动态加载到对话框中的 formCT__.php 文件之一。它们看起来都很相似。您会注意到 <select id="ctIndicationList"> 位于此处。这就是我想要触发的。

<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>
4

1 回答 1

2

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 );
        }
    });        
});
于 2012-07-12T04:57:37.643 回答