$('#div').bind('scroll' function({})) 不工作答案

【问题标题】：$('#div').bind('scroll' function({})) not working$('#div').bind('scroll' function({})) 不工作
【发布时间】：2015-01-03 02:08:14
【问题描述】：

我在这里添加了 2 个代码，window.scroll 在我的示例中有效，但第二个将 div 绑定到滚动条上没有。

任何人都知道我做错了什么！？

你知道我在 MeteorJS 工作

这2个代码在同一个js文件中。

    $(window).scroll(function() {
        lastSession = Session.get('c_info')[Session.get('c_info').current]
        if(lastSession.list == 0 && $(window).height() + $(window).scrollTop() >= $(document).height()){
            lastItem = $( ".list-item div:last" ).html();
            if (lastSession.page == 1){
                currentSession().more();
                lastItem2 = $( ".list-item div:last" ).html();
            } else if( lastItem2 != lastItem) {
                currentSession().more();
                lastItem2 = $( ".list-item div:last" ).html()
            }
        }
    });

    $('#playlist').bind('scroll',function() {
        console.log("div is scrolling");
    });

我也试过这个：

 $('#playlist').scroll(function() {
    console.log("div is scrolling");
 });

MeteorJS 模板：

<template name="playList">
    <div id="playlist" class="playlist show-for-large-up">
        {{#each list}}
        <a href="/video/{{_id}}" class="large-12 columns" id="pl{{v_id}}">
            <div>
                <div class="large-7 columns plRight">
                    <span>{{vTitle}}</span>
                </div>
            </div>
        </a>
        {{/each}}
    </div>
</template>

也试过了：

$('#playlist').on('scroll',function() {console.log('test')});// not working

尝试更改 id 名称并准备好文档：

$( document ).ready(function (){
        $('#pl_list').bind('scroll',function() {
                console.log("div is scrolling");
            });
    })//failed

div 有一个滚动条，列表很长，我有一个这样的 css：

.playlist {
  padding: 0;
  overflow-y: scroll;
  height: 458px;
}

也试过了：

Template.playList.rendered = function () {
    console.log("playlist rendered");// i can see this on logs this tells that template is in doom
    Meteor.setTimeout(function(){
       $('#playlist').on('scroll',function(){
       console.log('Scrolling...');
    });
    }, 2000);// with settimeout i have giveng it 2 more seconds
}

【问题讨论】：

你能在演示小提琴中重现吗？
哇！那是您正在使用的一些非常古老的 jQuery（> 3 岁...）。从 v1.7 开始，on() 替换了 bind() 方法。也就是说，这种类型的大多数问题要么归因于选择器，要么归因于元素是动态生成的，并且您需要使用委托事件。
@Bartdude 我试过 $('#playlist').on('scroll',function() {});
@A.Wolff 我没有重复的 id-s 我现在将发布我的模板
@EhsanSajjad 恐怕不行。我使用 MeteorJS 而不仅仅是普通的 html。

标签： javascript jquery meteor bind

【解决方案1】：

使用

 $('#playlist').scroll(function() {
    console.log("div is scrolling");
 });

相反（就像您为 window 所做的那样）。

这就是scroll() 的目的。 See jquery documentation.

【讨论】：

.scroll()的目的只是作为方法.on()的简写调用，.bind()也一样，所以和OP的代码没有区别
@jp-jee 忘了说我也试过了。顺便说一句，谢谢。

【解决方案2】：

试试这个 -

$(document).ready(function(){
  $('#playlist').on('scroll',function(){
    console.log('Scrolling...');
  });
});

【讨论】：

好的。我现在看到了你的版本。它缺少结尾的分号;。很可能是打字错误，不是吗？
这些分号是可选的，这里
@VishalSMujumdar 我尝试了你写的内容，但没有，它不起作用
如果这对某些人不起作用，则可能意味着 html 元素尚未设置样式“溢出：隐藏；”。 :-)

【解决方案3】：

如果元素已滚动，则在元素上触发滚动事件。因此，如果您只滚动 DOM 的“body”元素，则不会为#playlist 触发它。所以你在#playlist 的容器元素上放置了一个滚动条。拍摄答案，削减高度并添加滚动条，然后事件将在其上触发。

我做了一个 Jsfiddle http://jsfiddle.net/34j0qnpg/4/

html
<div id="playlist-wrapper">
<div id="playlist" class="playlist show-for-large-up">
    <a href="/video/1" class="large-12 columns" id="pl1">
        <div>
            <div class="large-7 columns plRight">
                <span>Titel</span>
            </div>
        </div>
    </a>

css部分

body, html {
padding: 0;
margin: 0;
background-color: lightgrey;
color: #fff;
font-family: Arial;
height: 5000px;
overflow-y:scroll;
}

#stats {
  position: relative;
}

#playlist-wrapper {
    border: 1px solid #000;
    padding: 10px;
    height: 300px;
    overflow-y: scroll;
}

#playlist {
    height: 1000px;
    background-color: darkgrey;
}

var $stats = $('#stats');
$('#playlist-wrapper').on('scroll', function() {
    $stats.html('playlist scrolling');
    console.log('playlist scrolling');
});

$(window).on('scroll', function() {
    $stats.html('window scrolling');
    console.log('window scrolling');
});

【讨论】：

我看到这是有效的，但不是在meteor.js 上无法理解为什么。使用 jquery 的其他一切都在工作，但不是这个。非常感谢。
顺便说一句，我有一个滚动条 .playlist { padding: 0;溢出-y：滚动；高度：458px； }
你在测试什么浏览器？你有没有尝试过另一个，我最近在使用 FF 插件时遇到了一些问题。
需要更多代码输入...什么 jquery 版本，或者是 Zepto 还是其他什么。 $('#playlist').length > 0 吗？
我刚刚通过 RESETING the meteorjs 解决了这个问题，我不知道为什么，但它只是自动工作。

【解决方案4】：

使用以下代码解决：早点尝试没有结果，在meteorjs项目重置后它只是自动工作：

Template.playList.rendered = function () {
  console.log("playlist rendered");
  $('#playlist').on('scroll',function(){
    console.log('Scrolling...');
  });
}

如果有人在寻找相同的答案，我就回答了我的问题。

感谢任何试图帮助我的人。

我喜欢这个社区。p>

【讨论】：