将jQuery选择保存到变量的行为不同

Question

我目前正在练习jQuery。 我的代码只是一个有10个列表项的无序列表。 每个项目都有一个不同的电影名称，我将选择$('li')到名为$listItems的变量中。在尝试.on method ，遇到了一些尴尬的事情。 当用户将mouseover在列表项上时，我的代码只是将今天的日期附加在每个列表项的旁边，然后用mouseout其删除。 对于我在HTML文件中编写的列表项，它工作正常，但对于使用JavaScript添加的列表项，它却无法正常工作。 但是，仅当我在变量$listItems上创建mouseover和mouseout时，才会发生这种情况。 当我使用普通的$('li')选择器时，它对于我通过HTML添加的项目以及通过javascript添加的项目都可以正常工作。

希望我的代码能说明我要理解的内容：

 /* This DOESN'T append the date to list items added via JAVASCRIPT on mouseover when the $('li') selection is saved to a variable, however it works fine if I used $('li') on mouseover and mouseout... */ $(document).ready(function(){ var $listItems = $('li'); //Add items to the unordered list using javascript var mainUL = document.getElementById('list'); var newMovies = ['Fantastic Four','Spectre','Fast and Furious','Jupiter Ascending','007', 'Zero Hour', 'The Runner', 'Brave','Never Back Down']; var newMovieEntry = document.createElement('li'); var newMovieName; newMovies.forEach( function(movie) { newMovieEntry = document.createElement('li'); newMovieName = document.createTextNode(movie); newMovieEntry.appendChild(newMovieName); newMovieEntry.textContent = movie; mainUL.appendChild(newMovieEntry); }); //Create date, day, month and year. var date = new Date(); var day; var month; var year = date.getFullYear(); var dayNames = ['Sunday','Monday','Tuesday','Wednesday', 'Thursday', 'Friday', 'Saturday']; var monthNames = ['Jan','Feb','Mar','Apr', 'May', 'Jun', 'July','Aug','Sep','Oct','Nov','Dec']; day = dayNames[date.getDay()]; month = monthNames[date.getMonth()]; //Append formatted date on mouseover. $listItems.on('mouseover', function() { $(this).append(" <em>(" + date.getDate() + "/" + month + "/" + year + ")</em>"); }); //Remove formatted date on mouseout $listItems.on('mouseout', function(){ $(this).children('em').remove(); }); }); 

 <!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script type="text/javascript" src="junk.js"></script> <meta charset="UTF-8"> <title>Hello world!</title> <style type="text/css"> ul { text-align: center; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; } li { width: 60%; border: 5px solid; list-style-type: none; margin: 10px; line-height: 2em; } .newly-added { background-color: #00ff00 !important; color: #000 !important; } .royalblue { background-color: #405BFF; } .hazyorange { background-color: #FD8239; } .lightgreen { background-color: #76FF76; } .watermelon { background-color: #FC4343 !important; } </style> </head> <body> <ul id="list"> <h1>Movies List</h1> <li>Star Wars</li> <li>Saving Private Ryan</li> <li>Bridge of Spies</li> <li>Avatar</li> <li>Fury</li> <li>Home Alone</li> <li>Snowden</li> <li>Inception</li> <li>Wolf of Wall Street</li> <li>Legend</li> </ul> </body> </html> 

为什么jQuery选择的行为有所不同？

Answer 1

您将HTML中存在的列表项存储到变量中，然后添加新项。 这不会更新您的变量，因此添加的项不接受您的.on方法的功能。