将 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 方法的功能。

将 jQuery 个选择保存到变量时表现不同

Saving jQuery Selections to Variables Behave Differently

javascript

jquery

events

jquery-selectors