javascript - window.addEventListener 与 jQuery 事件处理程序冲突

Question

我有一个简单的场景，我首先像这样绑定(bind) javascript 事件监听器:

(function () {

/*Loading widget initialization code on window load*/
if (window.addEventListener) {// W3C standard
    window.addEventListener('load', initWidget, false);
} else if (window.attachEvent) {// Microsoft
    window.attachEvent('onload', initWidget);
}

})();

请不要介意 initWidget，因为它已定义并且可以工作 我只是没有将代码放在这里，因为不需要它。

所以这些事件工作正常，但是当我在其中添加一些 jquery 事件处理程序时，jquery 事件不起作用。我在 $.ready() 中添加 jQuery 事件，如下所示:

$().ready(function() {
$("#header").mouseover(function() {
    $("#header").css("background-color", "red");
}).mouseout(function() {
    $("#header").css("background-color", "transparent");
});
})

jQuery mouseover 和 mouseout 不起作用，除非我删除 window.addEventListener 代码块。 js 事件以某种方式导致与 jQuery 发生冲突，并且控制台中没有任何内容。

我也在这里放了一个 fiddle :https://jsfiddle.net/kzmvaysq/复制确切的问题。我需要一种方法，使事件监听器不会与 jQuery 冲突。

更新

我追踪到主要问题区域，似乎是在尝试更改 initWidget 中 body 标记的 innerHTML。如果你现在看到 fiddle :https://jsfiddle.net/kzmvaysq/4/它可能会帮助您更好地理解问题。

Answer 1

问题是 document.getElementsByTagName("body")[0].innerHTML += mainButtons; 将当前的 dom 结构替换为新的，这将导致丢失所有事件/通过 jQuery 附加到每个元素的数据。

一个简单的解决方案是附加一个新的 div 元素，而不是使用 innerHTML 添加新内容

function initWidget() {
    var div = document.createElement('div');
    div.innerHTML = 'Somehtml';
    document.getElementsByTagName("body")[0].appendChild(div);
}

演示:Fiddle