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