HTML5 + jQuery + 无限滚动

Question

经过大量研究，我了解到live 状态下的$(window) scroll 事件不支持binding。这很好，但是关于我正在编写的脚本，我确实有一两个问题。

我有一个网站使用 HTML5 jQuery 历史插件 (http://tkyk.github.com/jquery-history-plugin/) 加载页面以获得流畅的用户体验，因为我的网站有一个锚定的音频播放器在里面。

在我的一个页面上，我创建了一个无限滚动，以便在窗口滚动时加载到相册中。如果您直接访问该页面，它可以正常工作，但如果您通过启用 HTML5 的链接（我有一些专门用于 HTML5 实现的链接）到达那里，则它不起作用。

这是我的无限滚动代码：

jQuery(function() {
                var getMoreMedias, loading, mediaType, nearBottomofPage, page, pendingCall, genreType, url, did_scroll;
              page = 1;
              loading = false;
                // did_scroll = false
              mediaType = $('.breadcrumbs strong').attr('rel');
                genreType = $('.breadcrumbs strong').data('genre-id')

              nearBottomofPage = function() {
                return $(window).scrollTop() > $(document).height() - $(window).height() - $('#footer').height();
              };

              getMoreMedias = function(page, mediaType) {
                    opts = {
                     lines: 12, //The number of lines to draw
                     length: 7, //The length of each line
                     width: 3, //The line thickness
                     radius: 10, //The radius of the inner circle
                     color: '#000', // #rgb or #rrggbb
                     speed: 1, //Rounds per second
                     trail: 60, // Afterglow percentage
                     shadow: true //Whether to render a shadow
                    };

                    var spinner = new Spinner(opts).spin()

                    $('#loadingMore').append(spinner.el)

                    url = '/top_medias/'
                    url += mediaType

                    if(genreType)
                        url += '/' + genreType

                    url += '?page=' + page

                $.ajax({
                        cache: false,
                  url: url,
                  type: 'get',
                  dataType: 'script',
                  success: function(data) {
                    $('#loadingMore').html('');
                            loading = false
                  },
                        error: function() {
                            $('#loadingMore').html('<p>No more results could be found</p>')
                            loading = false
                        }
                });
              };

            $(window).scroll(function(){
                    did_scroll = true
            })

            setInterval(function(){
                if(did_scroll) {
                    if (loading) return;
                if (nearBottomofPage()) {
                      loading = true;
                      page++;
                        getMoreMedias(page, mediaType)
                        did_scroll = false
                }
                }
            }, 250)
        });

如果页面是通过 Ajax 访问的（HTML5 插件本质上就是这样做的），有什么方法可以利用我上面的内容并使其工作？

Answer 1

我不确定这是否解决了您的问题，但是“它在浏览时有效，但在 Ajax 加载时无效”的声明向我提出了一个标志 - Javascript 不会在 Ajax 加载的页面中执行，而是您必须 @ 987654321@ 评估 Javascript。

当我需要此功能时，我会添加一个隐藏的 <div> 包含 Javascript（不带 `' 标签并在加载后执行，例如（伪代码）

$.ajax(url, success: function() { eval($('#ajax').html(); });

<div id="ajax" style="display:none"> alert('here'); </div>