Xain Pro
Xain Pro

Reputation: 71

After adding new DOM elements waypoints not working on new element only working on old elements?

here is what i have tried and not working even i have tried

$(document).ready(function () {
    $('.entry-item').waypoint(function (direction) {
        if (direction === "down") {
            $(this).children(".sticky-items").css({
                "position": "fixed",
                "top": "45px",
                "right": "0px"
            });
        } else if (direction === "up") {
            $(this).children(".sticky-items").removeAttr("style");
        }
    }, {
        offset: 5
    });
    window.addmore = function () {
        var $newdiv1 = $('<div class="entry-item"><div class="sticky-items">STICK XX</div><div>');
    $('#entries').append($newdiv1);
        $.waypoints('refresh');
}
});

$.waypoints('refresh') help required !

http://jsfiddle.net/VxqNa/9/

Upvotes: 1

Views: 1330

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You should reinitialize waypoint on dynamically added elements too:

DEMO

var initwaypoint = function (direction) {
        if (direction === "down") {
            $(this).children(".sticky-items").css({
                "position": "fixed",
                "top": "45px",
                "right": "0px"
            });
        } else if (direction === "up") {
            $(this).children(".sticky-items").removeAttr("style");
        }
    };

$(document).ready(function () {
    $('.entry-item').data('waypoint',true).waypoint(initwaypoint, {
        offset: 5
    });
    window.addmore = function () {
        var $newdiv1 = $('<div class="entry-item"><div class="sticky-items">STICK XX</div></div><div><div class="entry-item"><div class="sticky-items">STICK XX</div><div>');
    $('#entries').append($newdiv1);
        $('.entry-item').filter(function(){
            return !$(this).data('waypoint')
        }).data('waypoint',true).waypoint(initwaypoint, {
        offset: 5
    });

}
});

Upvotes: 2

Related Questions