javascript - 在插入 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/en-US/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;
});

这将确保在创建新表单时调用该函数...