Jquery addEventListener和mouseover只触发一次

Question

我有这段代码

{{1}}

当使用鼠标悬停元素时，我可以在控制台中看到该消息，但仅限第一次。我做错了吗？

感谢

Answer 1

您可以使用.each（）函数遍历所有具有id site-nav的元素，从而实现您所需要的功能。我相信它会把所有元素都放到一个数组中。

$（'＃site-nav a'）。each（function（{ \ code到这里，你可以用$（this）来引用当前的一个元素。 }））;

使用id作为选择器时也要注意。 Id用于一次性使用，并且特定于一个dom元素。不知道解释但是我试图使用ID来实现你正在做的事情并且它不起作用。

Answer 2

此代码似乎按书面形式工作：尝试运行下面的代码。 如果您提供更多的背景信息，我们可以更有效地提供帮助。话虽如此，值得注意的是鼠标进入元素时会触发mouseover事件，并且当元素覆盖元素时不会持续触发。

var $els = document.querySelectorAll('#site-nav a');
for(i = 0; i < $els.length; i++) {

        $els[i].addEventListener('mouseover', function() {
            console.log('yessss');
        });

}

<div id="site-nav"><a>Some link</a></div>

Answer 3

您所使用的代码按预期工作：

如果您查看图片，您只会看到一行但前面有一个数字，每次将鼠标悬停在链接上时，该数字都会增加：

var $els = document.querySelectorAll('#site-nav a');
for(i = 0; i < $els.length; i++) {

        $els[i].addEventListener('mouseover', function() {
            console.log('yessss');
        });

}

小提琴：

https://jsfiddle.net/kkwc3mLn/

Answer 4

由于您使用的jQuery可能很简单：

$('body').on('mouseover', '#site-nav a', function(){
    console.log('yessss');
});

希望这有帮助。

＆＃13;

＆＃13;

$('body').on('mouseover', '#site-nav a', function(){
    console.log('yessss');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="site-nav">
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
</div>

＆＃13;

＆＃13;

＆＃13;