Question

我目前正致力于Odin项目上的餐厅页面jQuery挑战，而且我遇到了一个相当难以理解的砖墙。我正在处理的问题与click事件侦听器有关。每次我点击我页面上的一个顶部链接时，它将清空所有内容的主体并生成一个新的HTML结构，但它只会在第一次点击时执行此操作，并且不会对任何后续点击执行此操作。

让这个问题特别令人沮丧的是，当我只为Home和Menu页面设置了click事件监听器时，我没有必要处理这个问题。当我只进行这些设置时，我能够轻松地在两个页面之间自由循环。但只有当我为Contact页面添加了事件监听器时才开始遇到这个问题。更糟糕的是，添加Contact事件监听器似乎“感染”了我的程序，即使在我注释掉Contact事件监听器的代码时，我也无法在Home和Menu页面之间自由循环！

这个问题确实在磨练我的问题，所以我被迫向亲爱的读者求助。有没有人有任何想法如何解决这个问题？我会永远感激任何愿意帮助的人。 HTML，CSS和jQuery将发布在

下面

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial scale=1">
  </head>
  <body>
    <div id="content"></div>
  </body>
</html>

CSS

* {
  background-color: slategrey;
}

li {
  display: inline;
  font-weight: 900;
  font-size: 2.5em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

img {
  display: block;
  margin: 0 auto;
}

td {
  border: 1px solid black;
  padding: 1%;
}

table {
  margin: 0 auto;
  margin-top: 10%;
}

#contact-info {
  margin: 0 auto;
  width: 25%;
  margin-top: 10%;
  font-size: 2em;
}

的jQuery

$(document).ready(function() {
  $("#content").append("<header><ul><li><a id='home' href='#'>Home</a>       
  <li><li><a id='menu' href='#'>Menu</a></li><li><a id='contact'>     
  href='#'>Contact</a></li></ul></header><img src='http://teaessare.com/wp-
  content/uploads/2012/05/compassion_vegan.jpg' class='img-responsive img- 
  thumbnail'></img><p>Come on down to the Vean Restaurant today! We serve  
  the best Vegan foods in town!</p>")

$("#home").on("click", function() {
  $("#content").empty();
   $("#content").append("<header><ul><li><a id='home' href='#'>Home</a>  
   </li><li><a id='menu' href='#'>Menu</a></li><li><a id='contact' 
   href='#'>Contact</a></li></ul></header><img src='http://teaessare.com/wp-
   content/uploads/2012/05/compassion_vegan.jpg' class='img-responsive img-
   thumbnail'></img><p>Come on down to the Vean Restaurant today! We serve    
   the best Vegan foods in town!</p>")
});

$("#menu").on("click", function() {
  $("#content").empty();
  $("#content").append("<header><ul><li><a id='home' href='#'>Home</a>  
  </li><li><a id='menu' href='#'>Menu</a></li><li><a id='contact'
  href'#'>Contact</a></li</ul></header><table><tr><td>Buddha's 
  Delight</td><td>A traditional dish eaten by Shaolin Monks. So good that 
  you just might pass out of existence</td></tr><tr><td>Vegetable 
  Korma</td><td>A spicy and aromatic dish. Eat this to obtain moksha.
  </td></tr><tr><td>Vegan Nachos</td><td>Simple, but gets the job done.</td>
  </tr><tr><td>Pad Thai</td><td>A tried and true Vegan dish. A medley of  to 
  strong flavors.</td></tr><tr><td>Vegan Sushi</td><td>A cruelty-free<td>An 
  alternative to a classic Japanese dish.</td></tr><tr><td>Loubyeh 
  B’zeit</td>exotic option for those who want to try something different.
  </td></tr></table>")
});

$("#contact").on("click", function() {
  $("#content").empty();
  $("#content").append("<header><ul><li><a href='#' id='home'>Home</a> 
  </li><li><a href='#' id='menu'>Menu</a></li><li><a href='#' 
  id='contact'>Contact</a></li></ul></header><div id='contact-info'<p>Phone
   Number: 000-000-0000</p><p>E-Mail: veganrestaurant@yoohoo.com</p><p>00000  
  Vegan Avenue, Vegan City, Vegania</p></div>")
});
});

Answer 1

empty()和append()没有失败，点击处理程序是因为附加处理程序时元素不存在。

当您继续替换

这样的内容时，您需要委派的事件处理程序

替换

$("#home").on("click", function() {....

与

$("#content").on("click", "#home", function() {

jQuery .empty（）＆amp;＆amp; .append（）莫名其妙地失败了

1 个答案: