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

Question

I'm working to make a couple buttons to change the theme of a website on click. They work on the main page, but when I tried to move them to the second page, they don't work anymore. The click isn't even being recognized at all.

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

Here is the html that goes with it

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

The cool function is exactly the same as the warm, except it uses removeClass instead of 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 Back it up partner. First you dont ever want to bind to document, UNLESS you are creating future events. Since you are using the id selector, you should only have 1 of those on the page, which you can rebind if you rebind that particular id to the page. You dont want to blind to the document because it is quite heavy or something. jquery has to parse the entire DOM everytime there is an html change to check if you added another "#warm" (in your example) to see if it needs to create another event binding to that element.

So first off your code should look like this

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

now time for some clarification, what do you mean you "move them to the second page"? What code in there says you are moving them ? What is the second page?