如何在 Material Design Lite 中将事件附加到表格复选框答案

【问题标题】：How to Attach Events to Table Checkboxes in Material Design Lite如何在 Material Design Lite 中将事件附加到表格复选框
【发布时间】：2015-07-31 23:31:21
【问题描述】：

当您创建 MDL 表时，其中一个选项是应用“mdl-data-table--selectable”类。当 MDL 呈现表格时，会在指定列的左侧插入一个额外的列，其中包含允许您选择特定行以进行操作的复选框。对于我的应用程序，当有人选中或取消选中某个框时，我需要能够处理一些 JavaScript。到目前为止，我一直无法做到这一点。

问题是您没有直接指定复选框控件，它们是在 MDL 升级整个表格时插入的。对于其他 MDL 组件，例如按钮，我可以在按钮本身上放置一个 onclick 事件，因为我使用 HTML 按钮标记指定它。

尝试将 onclick 放在为呈现复选框而创建的各种容器对象和跨度上未成功。我附加的事件似乎没有触发。我最接近的是将事件附加到 TR，然后遍历复选框以评估它们的状态。

这是 MDL 为单个复选框单元格生成的标记：

<td>
    <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select mdl-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialCheckbox">
        <input type="checkbox" class="mdl-checkbox__input">
            <span class="mdl-checkbox__focus-helper"></span>
            <span class="mdl-checkbox__box-outline">
                <span class="mdl-checkbox__tick-outline"></span>
            </span>
            <span class="mdl-checkbox__ripple-container mdl-js-ripple-effect mdl-ripple--center">
                <span class="mdl-ripple"></span>
            </span>
    </label>
</td>

我没有指定这个标记，因此我不能简单地将 onclick 属性添加到标签。

如果有我可以挂钩的事件链？我想按照程序员的意图去做。

【问题讨论】：

标签： material-design-lite

【解决方案1】：

它不是最好的代码，但话说回来，MDL 也不是最好的库。其实很丑。

除此之外，关于我现在的代码：该代码将绑定到文档根目录上的单击事件，该事件源自具有类 mdl-checkbox 的元素。

第一个问题：事件触发两次。为此，我使用了a piece of code from Underscore.js / David Walsh，它将在单击时消除函数调用的抖动（如果函数在 250 毫秒的间隔内执行多次，则只会调用一次）。

第二个问题：点击事件发生在MDL更新选择框的is-checked类之前，但是我们可以假设点击自上次以来改变了复选框的状态，所以否定点击时的hasClass是在大多数情况下确定检查状态是一个相当安全的选择。

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

$(document).on("click", ".mdl-checkbox", debounce(function (e) {
    var isChecked = !$(this).hasClass("is-checked");
    console.log(isChecked);
}, 250, true));

希望对你有帮助；）

【讨论】：

这应该被标记为正确答案。很棒的代码
我认为 50 毫秒是一个不错的猜测，当点击速度超过 250 毫秒（这是可行的）时，它不会记录最新状态。 50 似乎效果更好。

【解决方案2】：

我们目前没有办法直接解决这个问题。我们正在考虑使用 V1.1 添加事件，可以在 Issue 1210 订阅。请记住，只需使用右侧栏中的按钮订阅问题。我们不需要一堆 +1 和其他无用的 cmets 到处乱跑。

破解它的一种方法是将事件绑定到表本身以侦听任何“更改”事件。然后，您可以从事件的目标沿链向上获取表格行，然后从那里获取您需要的数据。

【讨论】：

【解决方案3】：

您可以委托包含表单的更改事件。

例如

var form = document.querySelector('form');
form.addEventListener('change', function(e) { 
    if (!e.target.tagName === 'input' || 
         e.target.getAttribute('type') !== 'checkbox') { 
       return;
    }
    console.log("checked?" + e.target.checked);
});

【讨论】：