チェックボックスのトリガ変更イベント

Question

特定のデータを確認しているときに、動的にチェックボックスをチェックしていて、チェックボックスの変更イベントをトリガしたいと思います。

Changeイベント

$("#chk").change(function() { 
      if ($(this).is(':checked')) { 
       if (localStorage.getItem('A') == undefined && sessionStorage.getItem('A') == null) { 
        location.href = "/" + lang.split('-')[0] + "/login.aspx"; 
       } 
       $("#dvClass").hide(); 
       $("#dvPromoCode").hide(); 
       $("#resultby").empty(); 
       $("#resultby").append('<option selected value="Flex">' + Res.flexidates + '</option>'); 
      } 
      else { 
       $("#dvClass").show(); 
       $("#dvPromoCode").show(); 
       $("#resultby").empty(); 
       $("#resultby").append('<option value="AirAvailability">' + Res.schedule + '</option>'); 
       $("#resultby").append('<option selected value="Flex">' + Res.flexidates + '</option>'); 
      } 
     }); 

が、それは変更イベントをトリガされていません。しかし、コンソールから実行した場合と同じように、期待通りに動作します。私は何が問題になるかも知りたい。

Answer 1

機能の順序はここでは重要です。

チェックボックスの値を設定する前に、変更イベントを配置してください。以下のコードを見てください。

$("#chk").prop("checked", "checked").trigger("change"); 

$("#chk").change(function() { 
    alert("triggered!"); 
}); 

jqueryが最初の行で実行されているときにチェックボックスの変更イベントがないため、上記は機能しません。これで同じことを確認することができますFiddle

変更イベント機能は、以下のように呼び出す前に配置してください。

$("#chk").change(function() { 
    alert("triggered!"); 
}); 

$("#chk").prop("checked", "checked").trigger("change"); 

これで、予想される結果が得られます。これで同じことを確認することができますFiddle

onイベントは、以下のような動的追加要素に常に使用することをお勧めします。

$("#chk").on('change', function() { 
    alert("triggered!"); 
}); 

Answer 2

あなたはprop change instrの前にchangeイベントを宣言していますか？更新の答えを参照してください。

$(function(){ 
 
    $("#chk").on("change", function() { 
 
    console.log(this.checked) 
 
    }); 
 
    
 
    
 
    $("#chk").prop("checked", true).trigger("change"); 
 
    
 

 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="chk" type="checkbox" />