DevExpress (JS / HTML) 将事件附加到弹出窗口中的元素

Question

如何正确地将事件附加到弹出窗口中的元素？

这是我目前的做法：

HTML

<div id="userDetail">
    <input id="checkbox" type="checkbox" />
    <div id="button-confirm"></div>
</div>

JavaScript

var userDetail = $("#userDetail").dxPopup({
    width: '550',
    height: 'auto',
    showTitle: true,
    title: "Setup Import Template",
    visible: false,
    onShown: function () {
        $('#checkbox').one('click', function () {
             $('.template-view').toggle();
        });
        $("#button-confirm").dxButton({
            onClick: function (e) {
                e.jQueryEvent.preventDefault();
                templateDataPopup.hide();
            }
        });
    }
}).dxPopup('instance');

问题在于：

• 每次显示弹出窗口时，jQuery 都会将新的单击事件附加到 #checkbox 元素，这是我使用 .one() 之后的事件。
• #button-confirm 元素的点击事件不会被附加两次。这是我想要的行为（虽然这不是我所期望的，但我认为因为它是一个 DevExpress 实例）。
• 在初始化弹出窗口之前，我曾尝试将事件附加到弹出窗口中的元素，但由于某种原因，在显示弹出窗口后，所有元素的事件都不起作用。

那么，如何正确地将事件附加到弹出窗口中的元素？

谢谢！

Answer 1

我得到了 DevExpress 支持的答复，建议使用 contentTemplate。回复：

使用 contentTemplate 属性创建弹出内容并添加 所需的事件：

contentTemplate: function (contentElement) {
    contentElement.append('<input id="checkbox" type="checkbox" />');
    var hideButton = $("<div id='button-confirm'>").dxButton({
        text: "Hide popup",
        onClick: function (e) {
            popupInstance.hide();
        }
    });
    contentElement.append(hideButton);
}

所以，建议不要通过onShown事件附加事件，而是附加在contentTemplate。

您还可以从contentTemplate中的HTML标签加载弹出内容