复选框触发更改事件

Question

我正在验证某些数据，然后动态检查复选框，并且想要触发复选框的更改事件。

$("#chk").prop("checked", true).trigger("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

如果您在道具变更指令之前宣布变更事件; 查看最新答案：

 $(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" /> 

Answer 2

在这里，功能的顺序很重要。

在设置复选框值之前，已放置了更改事件。 看下面的代码。

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

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

上面的方法不起作用，因为当jquery在第一行运行时，该复选框没有任何更改事件。 你可以在这个小提琴中检查一下

现在，在按如下所示调用它之前，先放置您的change事件函数。

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

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

现在您可以获得预期的结果。 你可以在这个小提琴中检查一下

始终最好将on事件用于动态添加的元素，如下所示。

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