CODEWITHSUNDEEP
jquery
andy
andy

Reputation: 2754

Fire jquery event once

So this fires each time the user scrolls the page to load in more posts.

It uses 

$("#next-paginav")[0].click();

because it's an anchor it's 'clicking' on.

$(document).ready(function() {
    $(document).scroll(function (e) { 

        var intBottomMargin = 300; 


        if ($(window).scrollTop() >= $('main-content').height() - $(window).height() - intBottomMargin) {


             setTimeout(function(){ $("#next-paginav")[0].click(); }, 800);
        }

    });
});

Dipesh's code that I can't get to work.

$(document).ready(function() {
    $(document).scroll(function (e) { 

        var intBottomMargin = 300; 


        if ($(window).scrollTop() >= $('main-content').height() - $(window).height() - intBottomMargin) {


             setTimeout(function(){ 
             $("#next-paginav")[0].one('click',function() {  });

              }, 800);


        }

    });
});

The problem is that it fires so quickly it fires two, three, four times before the posts even load in. This causes all sorts of problems, aside from the fact it'd be making so many requests on a live server, sometimes it skips over posts. Is there a way to only fire it once?

Upvotes: 1

Views: 314

Answers (4)

Ram
Ram

Reputation: 144679

$(document).ready(function() {
    var timeout = '';
    $(window).scroll(function (e) { 
        var intBottomMargin = 300; 
        clearTimeout(timeout);
        if ($(window).scrollTop() >= $('main-content').height() - $(window).height() - intBottomMargin) {
          timeout = setTimeout(function(){ 
                $("#next-paginav")[0].click(); 
          }, 800);
        }
    });
});

Upvotes: 1

GautamD31
GautamD31

Reputation: 28763

Try with this

    $("#next-paginav")[0].one('click',function (e) {

or you can try with "live"

    $("#next-paginav")[0].live('click',function (e) {

as per the "live" method is deprecated as from jquer1.7 You can use "on" method like 

    $("#next-paginav")[0].on('click',function (e) {

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

My assumption is if there is already a schedules load then you do not want to trigger the loading again.

You can use a flag based solution

$(document).ready(function() {

    var intBottomMargin = 300;

    $(document).scroll(function(e) {
        if (clickFlag) {
            return;
        }

        clickFlag = true;

        if ($(window).scrollTop() >= $('main-content').height()
                - $(window).height() - intBottomMargin) {

            setTimeout(function() {
                        $("#next-paginav")[0].click();
                    }, 800);
        }

    });
});

var clickFlag = false;
function myClickHandler() {
    $.ajax({}).always(function() {
                clickFlag = false;
            })
}

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

You can use .one() jQuery handler..

Description: Attach a handler to an event for the elements. The handler is executed at most once per element.

Official Document

Example

$("#next-paginav")[0].one('click',function() {  });

You can also use .off() handler too.

Example

$("#next-paginav")[0].click(function(){
  $(this).off(event);
});

Upvotes: 1

Related Questions