jquery click event executes multiple times inside setinterval function

1
votes

i have used below code,

setInterval(loadnew, 5000);

function loadnew() {
    $(".lf-item .lf-item-inner .lf-item-link").load();
    $('.lf-item .lf-item-inner .lf-item-link').on('click', function()
    {
         alert('image');
    });
}

as .lf-item .lf-item-inner .lf-item-link items are loaded when page scroll. So i used setinterval for this but getting result multiple times like every 5000 ms created one image output when click event occur it thorough all output values.

please run and wait more than 5000 ms and click image. below link:http://jsfiddle.net/g3fkL736/

can any one help me on this issue?

4
javascriptjqueryhtml
Why do you need to rebind the click event every time? You're not creating that element dynamically, you're just filling in the contents. - Barmar
Is necessary to set the click event inside the loadnew function? You are setting a event multiple times. You can use unbind or off, but it's not a good practice in your case. - Mario Araque
thanks barmar and mario arague for your inputs - Moorthi

4 Answers

0
votes

You could try this, Actually loadnew () called repeatly so before regiester event you need to remove the lisener for events like below.

Note that off("click").

function loadnew() {

      $(".lf-item .lf-item-inner .lf-item-link").load();

      $('.lf-item .lf-item-inner .lf-item-link').off("click").on('click', function() {
             alert('image');
      }); 
}
0
votes

Use unbind that will remove the event.

function loadnew() {
$(".lf-item .lf-item-inner .lf-item-link").load();
    $('.lf-item .lf-item-inner .lf-item-link').unbind('click');
    $('.lf-item .lf-item-inner .lf-item-link').on('click', function()
    {
         alert('image');
    });
0
votes

Take the event binding outside the interval function, it's not needed there.

$('.lf-item .lf-item-inner .lf-item-link').on('click', function()
{
     alert('image');
});

setInterval(loadnew, 5000);

function loadnew() {
    $(".lf-item .lf-item-inner .lf-item-link").load();
}
0
votes

You're setting the click handler over and over...

Instead, you can bind the .on() handler to the document, and add the selector as the second paramenter, so even if it does not exists at the time you create the handler, it will be processed at runtime.

setInterval(loadnew, 5000);
function loadnew() {
    $(".lf-item .lf-item-inner .lf-item-link").load();
}

$(document).on('click', '.lf-item .lf-item-inner .lf-item-link', function()
{
     alert('image');
});