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 实例）。
在初始化弹出窗口之前，我曾尝试将事件附加到弹出窗口中的元素，但由于某种原因，在显示弹出窗口后，none 个元素的事件起作用。

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

谢谢！

Answer 1

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

Use the contentTemplate property to create popup content and add the required events to it:

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

因此，建议在 contentTemplate.

中附加事件，而不是通过 onShown 事件附加事件

您还可以从 contentTemplate

中的 HTML 标签加载弹出内容

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

DevExpress (JS / HTML) Attach Events to Elements in a Popup

html

javascript

devexpress

devextreme