MouseEnter事件处理函数不是与李

Question

工作当我试图添加MouseEnter事件处理程序，以利标记它显示了我的错误：

Uncaught TypeError: list.mouseenter is not a function

var list = $('.side_bar_pages ul li')[1]; 
 

 
list.mouseenter(() => { 
 
    console.log('hello world') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="side_bar_pages"> 
 
    <ul> 
 
    <li id="clicked_secton"> 
 
     <span><img src="/icons/home.svg"></span> 
 
     <a href="/">home</a> 
 
    </li> 
 
    <li> 
 
     <span><img src="/icons/videocamera.svg"></span> 
 
     <a href="/footages">stock footage</a> 
 
    </li> 
 
    <li> 
 
     <span><img src="/icons/photocamera.svg"></span> 
 
     <a href="/images">stock photos</a> 
 
    </li> 
 
    <li> 
 
     <span><img src="/icons/hot.svg"></span> 
 
     <a href="/new">hot stock</a> 
 
    </li> 
 
    </ul> 
 
</section>

Answer 1

问题是因为你正在通过返回一个Element对象的索引访问一个jQuery对象。这没有mouseenter函数 - 因此错误。

如果您要访问的集合中的第二li并返回一个jQuery对象，使用eq()或:eq()代替：

var list = $('.side_bar_pages ul li').eq(1); 
 
// var list = $('.side_bar_pages ul li:eq(1)'); // alternate logic, same result 
 

 
list.mouseenter(() => { 
 
    console.log('hello world') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="side_bar_pages"> 
 
    <ul> 
 
    <li id="clicked_secton"> 
 
     <span><img src="/icons/home.svg"></span> 
 
     <a href="/">home</a> 
 
    </li> 
 
    <li> 
 
     <span><img src="/icons/videocamera.svg"></span> 
 
     <a href="/footages">stock footage</a> 
 
    </li> 
 
    <li> 
 
     <span><img src="/icons/photocamera.svg"></span> 
 
     <a href="/images">stock photos</a> 
 
    </li> 
 
    <li> 
 
     <span><img src="/icons/hot.svg"></span> 
 
     <a href="/new">hot stock</a> 
 
    </li> 
 
    </ul> 
 
</section>

Answer 2

你并不需要一个[1]当你选择<li>元素。删除你的代码工作

var list = $('.side_bar_pages ul li') 
 

 
list.mouseenter(() => { 
 
    console.log('hello world') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="side_bar_pages"> 
 
    <ul> 
 
    <li id="clicked_secton"> 
 
     <span><img src="/icons/home.svg"></span> 
 
     <a href="/">home</a> 
 
    </li> 
 
    <li> 
 
     <span><img src="/icons/videocamera.svg"></span> 
 
     <a href="/footages">stock footage</a> 
 
    </li> 
 
    <li> 
 
     <span><img src="/icons/photocamera.svg"></span> 
 
     <a href="/images">stock photos</a> 
 
    </li> 
 
    <li> 
 
     <span><img src="/icons/hot.svg"></span> 
 
     <a href="/new">hot stock</a> 
 
    </li> 
 
    </ul> 
 
</section>

Answer 3

另一种选择是使用第n个孩子就像CSS

var li = $('.side_bar_pages ul li:nth-child(1)'); 

li.on("mouseover", function(){ 
    console.log("entered"); 
}) 

;