JQuery Infinite Scroll загружает несколько одинаковых событий $ (document) .ready и запускает их несколько раз - PullRequest
2 голосов
/ 09 ноября 2011

Я новичок в jquery и надеюсь, что это простая проблема, но у меня заканчиваются идеи.

Я работаю с .net и у меня есть страница, которая включает несколько пользовательских функций jquery, таких как ниже, для отслеживания пользователя. Это прекрасно работает при первой загрузке страницы.

Проблема связана с бесконечной прокруткой, когда я отправляю сообщение на другую страницу и добавляю результаты. Если я добавлю результаты без повторного включения функции, указанной ниже, на эту опубликованную страницу, она никогда не вызовет событие, когда я нажму на новые добавленные ссылки. Но если я снова включу этот же фрагмент, он будет работать правильно. ЗА ИСКЛЮЧЕНИЕМ, что все предыдущие ссылки на странице теперь запускаются в дополнительное время.

Так что, если я прокручиваю вниз 5 страниц данных и затем нажимаю на первую ссылку на странице, теперь она срабатывает 6 раз !! Самый новый, который я добавил только один раз.

Я вижу кое-что о разборе и регулировании, но это кажется еще более простым, чем это - разве нет способа загрузить эту функцию только один раз и заставить ее работать для добавленных данных?

$(document).ready(function () {

   $('a.FollowJQ').click(function () {

     var username = $(this).attr('data');

     $.post('/jquery/follow.aspx',{ user: username },

       function (data) {

          if (!data.error) {

           if (data.server == 'SendToLoginPage') { window.location = "/login.aspx" }

              else { $('a.FollowJQ:[data=' + username + ']').html(data.server); }  }

                    else { $('a.FollowJQ:[data=' + username + ']').html(data.server); }

                        }, 'json');
                });
        });

1 Ответ

1 голос
/ 09 ноября 2011

Вместо использования .click() необходимо использовать .on() (начиная с jQ 1.7), чтобы делегировать элементу-предку в качестве слушателя.Привязать один раз, и тогда любой 'a.FollowJQ' может выполнить функцию.

$('#wrapper').on("click", "a.FollowJQ", function() { ..the function.. });

Если используется jQuery 1.6.x, .delegate () сделает то же самое:

$('#wrapper').delegate("a.FollowJQ", "click", function() { ..the function.. });

InНапример, "#wrapper" - это любой элемент-предок из элементов "a.FollowJQ", который, как ожидается, не будет уничтожен никакими другими манипуляциями с DOM.Самый близкий общий предок будет иметь лучшую производительность.

...