0

ajaxコンテンツを動的にロードするダイアログを開いています。

ダイアログは、複数のボタン（CTヘッド、CTチェストなど）から開くことができます。

ダイアログが開くと、.changeの発生をリッスンするイベントハンドラーを含む<select></select>メニューがあります。

私が抱えている問題は、.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ファイルの1つを以下に示します。これらはすべて同じように見えます。<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

ページの読み込み時にターゲット要素が存在しないため、ハンドラーを委任する必要があります。また、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 );
        }
    });        
});
于 2012-07-12T04:57:37.643 に答える