Jquery Waypoints Using ON

Question

I am stuck in a situation where I am injecting waypoints back into the dom using ajax. these new elements wont fire the existing waypoint created before the dom changed.

is there a way to use jquerys On event with waypoints?

I am using waypoints 2.0.2 http://imakewebthings.com/jquery-waypoints/ An example case of what i am trying to do is, re instert waypoints that can still use the waypoint method applied to the element specified with .waypoint

The issue I have is that after I insert new divs that are to be waypoints, they do not trigger.

A similar issue happens when you dynamically insert an element that has a click function attached to it after the dom has loaded once, you can not use .click, you use .on("click, "element", function().

one way to get this to work is to just recreate the waypoint inside the waypoint using:

(".nacho").waypoint(function(direction)

Except the reason this doesnt work in my situation is that all previous triggered or scrolled past waypionts will trigger.

<div class="nacho">

</div>
<script>
$(document).ready(function(){
    $("body").on("waypoint", ".nacho", function(event){

    //alert("test");

    });

    $(".nacho").waypoint(function(direction){
    alert("test");
        $("body").append("<div class=nacho>html to force the window down</div>");
    } , { offset: "bottom-in-view" });


});
</script>

I tried to reinsert the waypoint nacho back into the dom, after doing so, even with this ON, the waypoints do not trigger.

OK, so here's what we're going to need to know to make your question answerable: 1. What you tried, 2. What the result was, and 3. What result you actually want. Be specific. — Robert Harvey
When you use waypoints and inject new ones into the dom, the waypoint that existed function properly newly inserted elements that have waypoints classess assigned to them do not fire. similar to injecting a href with a click function, so use use on for the click function to be able to call that function against new dom elements. i want to try the same for waypoints — local idiot
Edit your question to that effect. Show us your code so that we can understand what you are talking about. — Robert Harvey

lucuma lucuma · Accepted Answer · 2013-04-16T15:57:27

After you update the DOM, issue a refresh:

$.waypoints('refresh')

The documentation: http://imakewebthings.com/jquery-waypoints/#docs

$.waypoints('refresh')

This will force a recalculation of each waypoint’s trigger point based on its offset option. This is called automatically whenever the window is resized or new waypoints are added. If your project is changing the DOM or page layout without doing one of these things, you may want to manually call it.

Jquery Waypoints Using ON

1 Answers