首次单击后未绑定的事件处理程序

Question

在 Backbone Marionette 复合视图中，我使用以下代码。

events: {
        'click th': 'doSort',
        'click #selectAllGroups': 'allMembersSelected'
    },

    allMembersSelected: function(event) {
        var selectAll;
        if ($("#selectAllGroups").prop('checked') == true) {
            selectAll = true;
        } else {
            selectAll = false;
        }

        var allCheckboxes = document.getElementsByName("selectGroupCheckBox");
        for (var i = 0, n = allCheckboxes.length; i < n; i++) {
            allCheckboxes[i].checked = selectAll;
        }


    },

#selectAllGroups 实际上是复选框，用于选择和取消选择列表中的所有复选框。 allMembersSelected 函数仅在第一次单击复选框时被调用，不会在任何后续单击时调用。 有趣的一点是，如果我从代码中删除以下部分，点击处理程序将在后续点击时被调用，并且问题不会出现。

if ($("#selectAllGroups").prop('checked') == true) {
    selectAll = true;
} else {
    selectAll = false;
}

Answer 1

您可以将此函数更新为：

allMembersSelected: function(event) {
   event.stopPropagation(); // add this one too, as seems event is bubbling up.
   $('input[type="checkbox"][name="selectGroupCheckBox"]')
                      .prop('checked', $("#selectAllGroups").prop('checked'));

}, 

只有当#selectAllGroups复选框被选中时，它才会标记check所有名为"selectGroupCheckBox"的复选框。

---

这个代码块：

events: {
    'click th': 'doSort', // 2. when event comes here all the elements on the row gets replaced by new rows. 
    'click #selectAllGroups': 'allMembersSelected' // 1. click on it bubbles up to the parent th
},

我发现当您单击th 时，它会对所有行进行排序并用新元素替换所有元素。因此，每个th 中的所有子元素，如果它们绑定了任何事件，它们会冒泡到 dom 并导致排序。

您的#selectAllGroups 复选框与th 中的情况相同，或者我会说它应该在th 中，因此绑定在其上的任何事件都会冒泡到th，这会导致排序并且感觉该事件在复选框上不起作用，但确实如此。