Question

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

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

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

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

col-1

我没有指定此标记，因此我无法简单地将标记添加到标记。

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

Answer 1

它不是最好的代码，但是再一次，MDL并不是最好的库。实际上，这很难看。

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

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

第二个问题：点击事件发生在MDL更新选择框的is-checked类之前，但我们可以认为点击更改了自上次以来复选框的状态，因此否定了{{1}在大多数情况下，在确定检查状态时，单击是非常安全的。

hasClass

希望它有所帮助;）

Answer 2

我们目前没有办法直接解决这个问题。我们正在寻找添加V1.1的事件，可以在Issue 1210订阅。请记住，只需使用右侧栏中的按钮订阅该问题。我们不需要一堆+ 1和其他非生产性的评论飞来飞去。

攻击它的一种方法是将事件绑定到表本身，同时监听任何“更改”事件。然后，您可以从事件的目标向上移动链获取表格行，然后从那里获取所需的数据。

Answer 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);
});

如何将事件附加到Material Design Lite中的表复选框

3 个答案: