Jquery doesn't get element by class

Question

Hope you're doing great :)

I'm trying to make a rolling animation and I've this code in my local jquery.js file:

$(() => { 

  /*  Components */

  $(".navbar_section").load("../components/navbar.html");
  $(".title_section").load("../components/title.html");
  $(".welcome_section").load("../components/welcome.html");
  $(".trust_section").load("../components/trust.html");
  $(".menu_section").load("../components/menu.html");
  $(".parallax_section").load("../components/parallax.html");
  $(".location_section").load("../components/location.html");
  AOS.init();

  /*  Animations */

  $(function () {
    var pizzaLeft = $(".pizza-menu-left");
    $(window).on("scroll", () => {
      var scroll = $(window).scrollTop();
      if (scroll >= 1500) {
        pizzaLeft.removeClass("roll-out-left");
        return pizzaLeft.addClass("roll-in-left");
      } else {
        pizzaLeft.removeClass("roll-in-left");
        return pizzaLeft.addClass("roll-out-left");
      }
    });
  });
});

The problem is this, .pizza-menu-left doesn't get selected, but all the classes above do. I've tried, live(), on(), but nothing seems to work. I know it's all about the time of the DOM objects and attributes being created, certainly, the function above is running before the class attribute is set. Still, I don't know how to get around this.

You're trying to retrieve the `.pizza-menu-left` element before it exists in the DOM. You need to either use the delegated signature of the `on()` method or use the callback of the relevant `load()` call which adds it in order for it to be accessible. Also note that I would strongly advise against making that many `load()` requests in a single page. You're effectively DDOSing yourself. If your goal is to include common content in multiple pages use server side includes instead; this will also remove the need for the callbacks. — Rory McCrossan, Sep 15 '21 at 15:08
Got it, thank you so much for the suggestions! And also thanks by the warning and the solution, I've had no clue :) — Marshall, Sep 15 '21 at 15:19
No worries, also note that you can remove the `return` statements and chain the `addClass`/`removeClass` calls: `pizzaLeft.removeClass("roll-out-left").addClass("roll-in-left");` — Rory McCrossan, Sep 15 '21 at 15:20

score 1 · Accepted Answer · answered Sep 15 '21 at 15:10

1

Assuming .pizza-menu-left are elements that are loaded dynamically, they will not be available when the onload function runs, so you'll need to define that variable inside the event handler.

$(function () {
    $(window).on("scroll", () => {
      var pizzaLeft = $(".pizza-menu-left");
      var scroll = $(window).scrollTop();
      if (scroll >= 1500) {
        pizzaLeft.removeClass("roll-out-left");
        return pizzaLeft.addClass("roll-in-left");
      } else {
        pizzaLeft.removeClass("roll-in-left");
        return pizzaLeft.addClass("roll-out-left");
      }
    });
  });

answered Sep 15 '21 at 15:10

I wrestled a bear once.

22,983
19
69
116

Thank you so much! Missed by a line of code xD By the way, I've read about dynamic loading, but couldn't really get the grasp... Could you explain shortly the logic behind it? :) – Marshall Sep 15 '21 at 15:17
1

The `load()` method is making a network request to some external HTML file and then putting that HTML inside that element. That's all it means to dynamically load elements. – I wrestled a bear once. Sep 15 '21 at 15:21
1

Thanks man ;) By the way, awesome user name ahahaa – Marshall Sep 15 '21 at 15:28

Jquery doesn't get element by class

1 Answers1