Jqueryドロップダウン変更イベントが機能しない

Question

IDがDA *の下にあるような選択タグがあり、ドロップダウンが変更されているかどうかを確認したい

window.onload = function() { 
 
    function refreshData() { 
 
    console.log('refresh data...'); 
 
    } 
 
    
 
    $('select[id*="DA"]').each(function() { 
 
    $(this).change(function() { 
 
     alert('change'); 
 
     refreshData(); 
 
    }); 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="dropdown " data-val="true" data-val-ddladdnew="Please select a valid DA." data-val-number="The field DA must be a number." data-val-required="The DA field is required." data-value="123456" id="DA_dff57gdc-3421-4b66-9f05-061e7a8l3207__ID" 
 
    name="DA[dff57gdc-3421-4b66-9f05-061e7a8l3207].ID" dropdownaddnew="true" dropdownargument="" dropdownsource="***.Data.Entities.DA" dropdownversion="636245716304981172"> 
 
    <option value=''></option> 
 
</select> 
 

 
<select class="dropdown " data-val="true" data-val-ddladdnew="Please select a valid DA." data-val-number="The field DA must be a number." data-val-required="The DA field is required." data-value="789012" id="DA_a50bfa29-2495-47e4-a52f-fa6a8d1305b0__ID" 
 
    name="DA[a50bfa29-2495-47e4-a52f-fa6a8d1305b0].ID" dropdownaddnew="true" dropdownargument="" dropdownsource="***.Data.Entities.DA" dropdownversion="636245716304981172"> 
 
    <option value=''></option> 
 
</select>

しかしrefreshdataを（）関数がトリガ取得されていないドロップダウンを変更することで、誰も私が間違っているか、他の方法が何であるかを知っているようだろうか？

initDropdownControls（） - バージョンとエンティティ名をとり、オプションに値を設定する関数があります。前のコードは、右クリックしてソースページを表示したもので、今度は検査してコードを取得しました。

<select class="dropdown select2-offscreen init" data-val="true" data-val-ddladdnew="Please select a valid DA." data-val-number="The field DA must be a number." data-val-required="The DA field is required." data-value="728583" id="DA_cff57bdc-3f21-4b66-9f45-061e7a8a3207__ID" name="DA[cff57bdc-3f21-4b66-9f45-061e7a8a3207].ID" dropdownaddnew="true" dropdownaddnewhandler="***.Areas.Admin.Controllers.DAController+DropDownAddNewHandler" dropdownargument="" dropdownsource="****.Data.Entities.DA" dropdownversion="636245716304981172" tabindex="-1"><option value=""></option><option value="735770">Gibson Test, Ben</option><option value="728583" selected="selected">MuTest, Mathew</option><option value="728429">Murdock, Test</option><option value="728412">Testlast, Test </option><option value="728410">Woll, Test</option><option value="-1">(Add New)</option></select> 

このオプションにはオプションがあり、window.onloadはすべてのdocument.readyの後にトリガーされる最後のものです。そう、それを使用して、はい@Roryあなたのスニペットが動作しているが、私の問題が何か他のものであり、まだ問題に直面していることを願っています。ページにはそのクラスでたくさんのselectがあるので.dropdownを使用できませんでした。この中にDA *を持つこの特定のselectだけを変更したいと思います。

Answer 1

、委任イベントハンドラは、select要素が再作成されたとして、それが仕事になります！

$('body').on('change', '.dropdown', function() { 
    alert('change');   
    refreshData();   
}); 

Answer 2

「DA」で始まるIDを持つすべての要素を選択するように要求されているため、アラートには既に各選択フィールドの変更が表示されるため、.eachを使用する必要はありません。 。また、変更を検出する関数のオプションに新しい値がありませんでした。 @RoryMcCrossanコメントを1として

JSFiddle

<select class="dropdown " data-val="true" data-val-ddladdnew="Please select a valid DA." data-val-number="The field DA must be a number." data-val-required="The DA field is required." data-value="123456" id="DA_dff57gdc-3421-4b66-9f05-061e7a8l3207__ID" name="DA[dff57gdc-3421-4b66-9f05-061e7a8l3207].ID" dropdownaddnew="true" dropdownargument="" dropdownsource="***.Data.Entities.DA" dropdownversion="636245716304981172"> 
    <option value='1'>1</option> 
    <option value='2'>2</option> 
    <option value='3'>3</option> 
    </select> 


<select class="dropdown " data-val="true" data-val-ddladdnew="Please select a valid DA." data-val-number="The field DA must be a number." data-val-required="The DA field is required." data-value="789012" id="DA_a50bfa29-2495-47e4-a52f-fa6a8d1305b0__ID" name="DA[a50bfa29-2495-47e4-a52f-fa6a8d1305b0].ID" dropdownaddnew="true" dropdownargument="" dropdownsource="***.Data.Entities.DA" dropdownversion="636245716304981172"> 
    <option value='a'>a</option> 
    <option value='b'>b</option> 
    <option value='c'>c</option> 
</select> 
<script> 
$('select[id*="DA"').change(function(){ 
    alert('changed!') 
}); 
</script>