javascript - jQuery无法识别第二页上li项目的点击

我正在努力制作几个按钮，以更改点击时网站的主题。它们在主页上工作，但是当我尝试将其移至第二页时，它们不再起作用。甚至根本无法识别点击。

$(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>

除了使用removeClass而不是addClass之外，cool函数与warm函数完全相同。

最佳答案

$(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，以检查是否添加了另一个“ #warm”（在您的示例中），以查看它是否需要创建另一个绑定到该元素的事件。

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

$(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');
  });}

现在该进行澄清了，您“将它们移至第二页”是什么意思？那里的什么代码表明您正在移动它们？什么是第二页？