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

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

本文关键字：窗口 元素 JS HTML 事件 DevExpress      更新时间：2023-09-26

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

这就是我目前的做法：

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

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

谢谢！

我从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 中附加。

您还可以从 HTML 标记加载弹出内容contentTemplate

相关文章：