Question

在Backbone牵线木偶复合视图中，我使用以下代码。

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'));

},

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

此代码块：

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的{{1}}复选框中，或者我会说应该在th中，因此绑定在其上的任何事件都会向th冒泡{1}}导致排序，并且感觉事件不在复选框上，但确实如此。

首次单击后事件处理程序解除绑定

1 个答案: