在插入DOM的元素上調用函數

Question

我無法控制何時以及如何將此元素添加到DOM。 但是，當確實添加了它時，我想在其上調用jQuery函數。 我正在尋找匹配form[data-validate]元素，然后調用我編寫的jQuery函數： validate

我想出了一個臨時解決方案：

document.addEventListener('DOMNodeInserted', function(event) {
  if (event.target.nodeName === 'FORM' && $(event.target).data('validate')) {
    return $(event.target).validate();
  }
}, false);

根據https://developer.mozilla.org/zh-CN/docs/DOM/Mutation_events的說法，此代碼將“大大降低對該文檔進行進一步DOM修改的性能（使其變慢1.5-7倍！）”和瀏覽器兼容性相當差。

誰能做得更好？

Answer 1

嘗試委派活動。

$(document).on('DOMNodeInserted' , 'form' , function(event){
    if (event.target.nodeName === 'FORM' && $(event.target).data('validate')) {
       return $(event.target).validate();
    }
     return false;
});

這將確保在創建新表單時將調用該函數。