每当将匹配选择器的元素添加到控件元素时，如何将事件绑定到 Can.Control 以运行？答案

【问题标题】：How to bind an event to Can.Control to run whenever an element matching the selector is added to the control element?每当将匹配选择器的元素添加到控件元素时，如何将事件绑定到 Can.Control 以运行？
【发布时间】：2015-01-15 23:19:10
【问题描述】：

我正在尝试构建一个 DateTimePicker 小部件，并且不想担心小部件的实例化，因此我创建了一个 Can.Control，它将 html 正文作为元素。

但是，现在我的输入元素使用 can.view 在 DOM 中呈现。如何将事件绑定到将新的 dateTime 元素插入到我的控件范围？

/**
 * DateTime Plugin
 */

plugins.DateTime = can.Control.extend({

},{
    init : function ( element , options ){
    },

    'input.dateTime click' : function (){
        $( this.element ).find('input.dateTime').datetimepicker();
    }
});
$(function(){
    new plugins.DateTime('body');
});

当元素添加到控制元素时，有什么方法可以指定“input.dateTime load”来绑定日期选择器？

【问题讨论】：

标签： canjs canjs-view canjs-control

【解决方案1】：

有几种方法可以做到这一点，例如，您的基于 can.view 的渲染可以在完成后执行回调，因此您可以这样做： var that = this; can.view(template, data, function() { that.element.find("input.dateTime").datetimepicker(); }

但这并不是我真正推荐的。前面的示例没有说明由于第一次呈现视图后数据更改而必须重新绘制其中一个字段的任何情况。相反，创建一个这样的助手： Mustache.registerHelper("datetimepicker", function() { return function(el) { $(el).datetimepicker(); } });

然后在您的 (Mu)Stache 文件中：

<input type="text" name="datetime_start" class="dateTime" {{datetimepicker}} can-value="datetime_start">

【讨论】：

谢谢！您的第二个建议是有道理的，但是我的整个应用程序 html 没有使用 mustache 渲染器渲染，我仍然需要单独绑定 datetimepicker。该控件对我来说似乎是最好的选择，因为只要元素在我的控制范围内，我就不必跟踪绑定。我看到了一些关于使用 control.on 的建议，但不明白如何将其应用于我的情况。
这很棘手，因为“插入”事件（将元素附加到 DOM 时的 CanJS 事件）不会冒泡，因此您无法在委托中监听它。否则你可以做this.on("inserted", "input.dateTime", function(el, ev) { ... })。解决此问题的一种方法是使用 MutationObserver，因为它们将捕获添加到绑定元素下方的匹配项；或者，您可以使用一个 Mustache 助手，直接在要添加的元素上绑定到“插入”，然后发送一个合成事件来冒泡（例如“datetimeinserted”）。上述方法都不需要这些