2012-07-12 35 views
0

我开口,其动态加载Ajax内容的对话功能()。

该对话框可以由多个按钮(CT头部,胸部CT等被打开)

当对话框打开有一个<选择> < /选择与监听到发生.change事件处理程序>菜单。

我遇到的问题是,.change ISN”。 t被触发:

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

回答

2

您需要委托处理程序,因为你选择器来代替目标元件不会在页面加载时,你也有button.ctIndicationList存在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); 
     } 
    });   
});