Question

我正在努力制作一些按钮，以便在点击时更改网站的主题。它们在主页面上工作，但是当我尝试将它们移动到第二页时，它们不再起作用了。点击甚至根本不被识别。

$(document).ready(function(){
  $(document).on("click", "#warm", function() {
    console.log("Clicked!");
    $(b).addClass('color-red');
    $(li).addClass('color-red #pages li');
    $(h1).addClass('color-red h1');
    $('#pages').addClass('color-red #pages');
  });}

这是随之而来的html

<div class="col-md-4 text-center">
  <ul id="colors">
    <li id="warm">
      Warm
    </li>
    <li id="cool">
      Cool
    </li>
  </ul>
</div>

cool函数与warm完全相同，只是它使用removeClass而不是addClass。

Answer 1

$(document).ready(function(){
  $(document).on("click", "#warm", function() {
    console.log("Clicked!");
    $(b).addClass('color-red');
    $(li).addClass('color-red #pages li');
    $(h1).addClass('color-red h1');
    $('#pages').addClass('color-red #pages');
  });}

WOAHHH备份合作伙伴。首先，您不希望绑定到文档，除非您正在创建未来事件。由于您使用的是id选择器，因此页面上只应有1个，如果将该特定ID重新绑定到页面，则可以重新绑定。你不想对文件视而不见，因为它很重或什么的。每次有html更改时，jquery都必须解析整个DOM，以检查是否添加了另一个＆＃34;＃warm＆＃34; （在您的示例中）查看是否需要创建另一个绑定到该元素的事件。

首先，您的代码应该如下所示

$(document).ready(function(){
  $("#warm").on("click", function(e) {
    console.log("Clicked!");
    $(b).addClass('color-red');
    $(li).addClass('color-red #pages li');
    $(h1).addClass('color-red h1');
    $('#pages').addClass('color-red #pages');
  });}

现在是时候澄清一下了，你是什么意思＆＃34;将它们移到第二页＆＃34;？那里的代码说你正在移动它们？什么是第二页？

jQuery没有在第二页上识别出针对li项目的点击

1 个答案: