如果更改源不是来自html，则不会触发javascript事件? [英] javascript event not triggered if the change origin is not from the html?

问题描述

我试图理解为什么以下示例中的change事件没有被触发(我将确切显示在哪里).

I am trying to understand why the change event in the following example is not triggered (I'll show exactly where).

我有一个复选框，选中时将其称为"mainCheckbox"-我想选中其他一些相关的复选框(到目前为止有效).

I have a checkbox, lets call it 'mainCheckbox', when checked - I want to check some other related checkboxes (so far working).

此外，当我取消选中其中一个相关复选框(子复选框)时，我也想取消选中mainChecbox，这也可以工作，但这是我无法理解的事情:

In addition when I uncheck one of the related checkboxes (child checkboxes) - I want to uncheck the mainChecbox, this also works - but here is something I am failing to understand:

我正在更改mainCheckbox的checked属性(在"childCheckbox"的onchange处理程序中)，

I am changing the checked property of the mainCheckbox (in the onchange handler of the 'childCheckbox'),

为什么不调用mainCheckbox的onchange处理程序?
还是怎么不触发主复选框的onchange事件?

how come the onchange handler of mainCheckbox is not invoked?
Or how come the onchange event of the main checkbox is not triggered?

下面是代码:

//binding to the 'mainCheckbox' change event:
$("[data-role='group']").bind("change", function(event){
    //checking / unchecking all related checkboxes respectivly
    $("li input[data-group='" + event.target.id + "'").prop('checked', $(this).prop("checked"));
})

//binding to the change event of every 'child checkbox'
$("li input[data-group]").bind("change", function(){
    if (event.target.checked){
        //if the child checkbox is now checked - I am checking if now all child checkboxes are checked,
        //if so - I need to check the main checkbox.
        if ($("[data-group=" + event.target.dataset.group + "]:checked").length == $("[data-group=" + event.target.dataset.group + "]").length){
            $("#" + event.target.dataset.group).prop("checked", true);
        }
        //TODO: add this device to the selectedDevices array.
    }
    else {
        //the checkbox is now unchecked - so I am unchecking the main checkbox -
        //but here is my failing to understand part: I am unchecking the main checkbox - 
        //why the change event is not triggered? I thought that now all child checkboxes will be unchecked as well
        //(I am happy they are not :) just failing to understand why)...
        $("#" + event.target.dataset.group).prop("checked", false);
        //TODO: remove this device from the selectedDevices array.

    }

})

在此先感谢所有响应者，
吉米

Thanks in advance to all responders,
Jimmy

推荐答案

通常，仅响应 user 操作而触发事件，而不响应代码中的操作.在复选框上设置checked属性不会触发其change事件. 用户会更改复选框的选中状态.

In general, the events are only fired in response to user actions, not actions in code. Setting the checked property on a checkbox does not fire its change event; the user changing the checkbox's checked state does.

当您使用代码设置input的value，select的selectedIndex(或value)等时，也是如此.

This is also true for when you use code to set the value of an input, the selectedIndex (or value) of a select, etc.

关于form元素上的submit事件也是如此:调用HTMLFormElement的submit函数将提交表单而不会触发其submit事件. 但是，如果您使用jQuery提交表单(例如，如果对包裹在HTMLFormElement上的jQuery对象调用submit)，它会执行触发其submit事件处理程序.这是jQuery API设计的不幸副产品.

It's also true in relation to the submit events on form elements: Calling an HTMLFormElement's submit function will submit the form without triggering its submit event. But, if you use jQuery to submit the form (e.g., if you call submit on a jQuery object wrapped around an HTMLFormElement), it does trigger its submit event handlers. This is an unfortunate by-product of jQuery's API design.

如果要触发事件，可以使用jQuery的 trigger 函数来完成.因此，如果合适，在设置checked之后，您可以.trigger("change").通常，我主张不生成这样的综合预定义事件(相反，只是调用您需要调用的任何函数，或使用综合自定义事件)，但是存在有效的用例.

If you want to trigger an event, you can do that with jQuery's trigger function. So if it's appropriate, after setting checked, you could .trigger("change"). In general I advocate not generating synthetic predefined events like that (instead, just call whatever function you need to call, or use a synthetic custom event), but there are valid use cases.

这篇关于如果更改源不是来自html，则不会触发javascript事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！