内联/运行时绑定的事件在文档加载时自动删除

Question

代码，再次：

console.log( field.$el.on('keyup change', function() {

    console.log( field.$el.val().length );

    if( field.$el.val().length > 0 ) field.clearError();

}), $._data( field.$el[0], 'events' ) );

该元素在绑定时存在。事件似乎根据 $._data 绑定，但在输入时没有任何反应。没有预期的控制台输出，没有调用函数，也没有控制台错误。如果我使用 element.addEventListener 代替它工作正常。

知道为什么这个坏了吗？使用 jQuery 3.2.1.

编辑：页面加载后，运行 $._data( $('#input_creative_url')[0], 'events' ) 从控制台在有问题的元素上 returns undefined 而不是在运行时从控制台输出相同的事件.什么会导致 jQuery 清除该元素的内部数据？

编辑 2：我没有使用 $(document).ready(...)，而是将代码内联放置在代码引用的元素之后。我这样做是出于性能原因 - $(document).ready(...) 触发时间太长。如果我将代码包装在 $(document).ready(...) 中，代码就可以正常工作。看起来，在最初的设置中，jQuery 正在删除 $(document).ready(...) 上的绑定事件。有什么办法可以防止这种情况吗？

编辑 3：如果在原始示例中，我在代码前加上 jQuery.cleanData = function(){};，代码工作正常。所以 jQuery.cleanData and/or 它的被调用者是罪魁祸首。显然，我不能仅仅破坏 jQuery 的垃圾收集来使我的代码正常工作，但是有人对从这里去哪里有任何建议吗？

编辑 4：我明白了。我正在从 DOM 中删除元素的父元素，然后将其重新插入到其他地方。我需要使用 detach() 而不是 remove()。

Answer 1

罪魁祸首：使用 .remove() 从 dom 中删除元素的父元素并在别处重新插入它。在这种情况下用于保留绑定事件的正确函数是 .detach().

内联/运行时绑定的事件在文档加载时自动删除

Events bound inline / at runtime being automatically deleted on document load

jquery

jquery-events