Question

我有这个简单的场景，我首先绑定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");
});
})

除非我删除mouseover代码块，否则jQuery mouseout和window.addEventListener无效。不知何故，js事件与jQuery发生冲突，控制台中没有任何内容。

我在这里也提出了一个小提琴：https://jsfiddle.net/kzmvaysq/复制确切的问题。我需要一种方法，以便事件监听器不与jQuery冲突。

更新

我追溯到主要问题区域，似乎正在尝试更改body中initWidget标记的innerHTML。如果您现在看到小提琴：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

Answer 2

我实际上无法说明理由但是，我建议您将所有事件切换到jQuery以防止冲突。

您可以通过这种方式附加相同的事件：

 $(window).load(initWidget);

它还会减少代码量，因为jQuery会为您正确应用事件。

以下是基于您的JS Fiddle Demo。

更新：为什么您认为它完全冲突？

这是一个another JSFiddle，它对我有用。

更新2：

这是一个已知问题。如果更改JS元素属性并使用jQuery事件，则会导致一些问题。阅读更多here。

您需要选择以下选项之一：

在您更改innerHTML后分配事件。现在它发生在它之前，因为$(document).ready()之前正在触发$(window).load()。

例如，在编辑后将#header事件发送到initWidget。

使用 jQuery.append() 功能（对我而言，这是最佳解决方案）。

例如，这样：

function initWidget() 
{
    $("body").append("<div>Somehtml</div>");
}

使用event delegation。

看看这段代码：

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

Here is the [JS Fiddle Demo][5].

Answer 3

我认为没有任何冲突。

当我添加initWidget()功能时，它开始工作。

这是小提琴 - https://jsfiddle.net/51sxLe7f/

更新了小提琴 - https://jsfiddle.net/pg40wp43/2/

window.addEventListener与jQuery事件处理程序

3 个答案: