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。

您还可以加载HTML标签中contentTemplate