onChangeイベントが呼び出されない

Question

この変更機能を使用して、非表示のクラスをカミソリドロップダウンリストに追加または削除しました。 これは、ドロップダウンのいずれかの値がその文字列であるかどうかを確認し、変更された場合、その選択に基づいてクラスを削除または追加します。

<label class="control-label col-md-4 optional" id="PIdsLabel" for="pIds">PIds</label> 
@Html.DropDownList("PIds", allPlacements, new { htmlAttributes = new { @multiple = true, @data_placeholder = "Select", @class = "form-control no-chosen hidden"}}) 


<label class="control-label col-md-4 optional" id="FLabel" for="FType">FType</label> 
@Html.DropDownList("FType", Enum.GetValues(typeof(FType)).Cast<FType>().Select(o => new SelectListItem { Text = o.GetDescription(), Value = o.ToString()}), new { htmlAttributes = new { @multiple = true, @data_placeholder = "Select", @class = "form-control no-chosen hidden"}}) 

@section Scripts 
{ 
    @Scripts.Render("~/js/index-layout") 
    <script type="text/javascript"> 

    function linkify() 
    { 
     jQuery.event.trigger('linkify'); 
    } 

    (function() { 
     $(document) 
      .ready(function() 
      { 

       var $typeCell = $('<td></td>'); 

       var $typeField = $('<select></select>') 
        .attr('class', 'text-box single-line form-control') 
        .attr('id', 'PType') 
        .attr('name', 'PCs[0].PType'); 


       @foreach (var item in allPTypes) 
       { 
        @:$typeField.append($('<option>').attr('value', "@item").text('@(((PType) item).ToString().Replace("_", " "))')); 
       } 

       $typeCell.append($typeField); 

       $('#PType').change(function (e) 
       { 

        if ($('#PType').val() == "Conditional_Locked") 
        { 
         alert("Hello"); 
         $('#FType_chosen').removeClass('hidden'); 
         $('#FTypeLabel').removeClass('hidden'); 
         $('#PIds_chosen').removeClass('hidden'); 
         $('#PIdsLabel').removeClass('hidden'); 
        } 
        else 
        { 
         alert("Bye"); 
         $('#FType_chosen').addClass('hidden'); 
         $('#PIds_chosen').addClass('hidden'); 
         $('#FTypeLabel').addClass('hidden'); 
         $('#PIdsLabel').addClass('hidden'); 
        } 
       }); 


     $(document) 
      .bind('linkify', 
       function() 
       { 
        doLinkify($elements.$resultDetailView); 
       }); 
     }); 
    })();   
    </script> 
} 

問題は変更イベントが発生しないことです。どうして？

.hidden { 
    display: none; 
} 

ブラウザのコンソールウィンドウ内でchangeイベントを使用してスニペットを実行しようとしましたが正常に動作します。私は警報を加えて、彼らが発射しているかどうかを確認し、コンソールウィンドウから直接起動すると正常に動作するかどうかを確認しました。ページが読み込まれて選択の変更が検出されないとき（私がコンソールに直接入り込まない限り）

Answer 1

あなたの選択は動的です。自己呼び出し関数が実行され、changeイベントがバインドされると、DOM要素がその時点でdomにないため、バインドするものは何もありません。あなたがする必要があるのは、次のとおりです。

$(document).on({ 
change: function (e, i) { 
    //your code goes here 
    } 
}, '#Ptype'); 

これは、PTypeという要素の変更を常に聞くようドキュメントに指示することです。このコードはJavaScriptのどこにでも置くことができます。これは動的な要素を扱います。