WayPoint Refriring after div changes

Question

<div class="content-book-row-container">
  <div id="content-book-container-inject">
   <div class="content-book-row-container">when im read im read</div>
   <div class="content-book-row-container">when im read im read</div>
   <div class="content-book-row-container">when im read im read</div>
   <div class="content-book-row-container">when im read im read</div>
  </div>
 <div id="content-book-row-footer"></div>
</div>

when the footer waypoint fires, even though the passed waypointrows have passed the view, they will all be re-triggered/fired off again.

How is it possible to insert new waypoints without recalling all of the previous waypoints?

Answer 1

This was a reply from the developer of waypoints, i thought I would share it here.

Words can be tricky for visual code problems, but I'm going to take a swing at codifying what you've described:

<div class="wrapper">
  <div class="thing-container">
    <div class="injected-thing">...</div>
  </div>
  <div class="footer"></div>
</div>

And your footer waypoint looks something like this:

$('.footer').waypoint(function(direction) {
  injectNewThing();
  $('.injected-thing').waypoint(function() {
    alert('reached');
  });
});

For the sake of simplicity, let's say injectNewThing inserts just one more injected-thing:

<div class="wrapper">
  <div class="thing-container">
    <div class="injected-thing">...</div>
    <div class="injected-thing">...</div>
  </div>
  <div class="footer"></div>
</div>

The problem lies in the next line:

$('.injected-thing').waypoint(function() {
  alert('reached');
});

The target, .injected-thing includes all of them. But what you really want is just a waypoint on the new ones. My suggestion is to add a class to the "things" you have already triggered the waypoint function on, and then target items that do not have that class:

$('.footer').waypoint(function(direction) {
  injectNewThing();
  $('.injected-thing').not('.reached').waypoint(function() {
    $(this).addClass('reached');
    alert('reached');
  });
});

Let me know if that doesn't make sense or if I've mischaracterized the situation.