Question

例如，在使用AJAX之后，我将拥有一个可滚动的DIV。如何将滚动事件绑定到它？

我试过了：

$(window).on("scroll", ".mydiv", function(){...})
$(document).on("scroll", ".mydiv", function(){...})
$(".mydiv").on("scroll", function(){...})
$(".mydiv").scroll(function(){...})

但他们没有用。

DEMO

Answer 1

我正在复兴这个老问题，因为我没有找到好的答案，我努力争取更好的方式来倾听＆＃39;滚动＆＃39;动态附加元素的事件。

由于Scroll事件没有在DOM中冒出来，因此我们无法使用on（），就像我们用于滚动一样。所以我在元素中想出了听我自己的自定义触发事件，我想听听“滚动”的内容。事件。

在元素附加到DOM后跟随触发我自己的自定义事件后，滚动事件被绑定。

＆＃13;

$("body").on("custom-scroll", ".myDiv", function(){
    console.log("Scrolled :P");
})

$("#btn").on("click", function(){
    $("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
    listenForScrollEvent($(".myDiv"));
});


function listenForScrollEvent(el){
    el.on("scroll", function(){
        el.trigger("custom-scroll");
    })
}

＆＃13;

body{ font-family: tahoma; font-size: 12px; }
	
	.myDiv{
		height: 90px;
		width: 300px;
		border: 1px solid;
		background-color: lavender;
		overflow: auto;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" id="btn" value="Click"/>

＆＃13;

Answer 2

我遇到了同样的问题，我在jQuery .on() API中找到了以下内容：

在所有浏览器中，加载，滚动和错误事件（例如，在元素上）不会冒泡。在Internet Explorer 8及更低版本中，粘贴和重置事件不会冒泡。这些事件不支持与委托一起使用，但是当事件处理程序直接附加到生成事件的元素时，可以使用它们。

很遗憾，这似乎不可能。

Answer 3

尝试从您的代码修改

http://jsfiddle.net/apDBE/

$(document).ready(function(){

    // Trigger
    $("#btn").click(function(){
        if ($(".myDiv").length == 0) // Append once
        $("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');
    });

    // Not working
    $(".myDiv").scroll(function(){
        alert("A");
    });

    // Not working
    $(document).on("scroll", ".myDiv", function(){
        alert("A");
    });
});

希望这个帮助

Answer 4

http://jsfiddle.net/hainawa/cruut/

$(document).ready(function(){
    var $mydiv = $('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');

    // It will work
    $mydiv.scroll(function(){
        alert("A");
    });

    // Trigger
    $("#btn").click(function(){
        //You are using the method append,so you don't need judge if div.mydiv exits.
        //You'll need do this if you're using display:none
        $("body").append($mydiv);
    });
});

Answer 5

通过直接附加// no timeout for "Quick" String s1 = new TimeoutDependingOnParam("Quick").execute(); // timeout for "Looong" String s2 = new TimeoutDependingOnParam("Looong").execute();来完成工作，请查看下面的示例。

希望这有帮助。

on

$("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>');

$(".myDiv").on("scroll", function(){
  	 console.log("scrolling");
});

	body{ font-family: tahoma; font-size: 12px; }
	
	.myDiv{
		height: 90px;
		width: 300px;
		border: 1px solid;
		background-color: lavender;
		overflow: auto;
	}

Answer 6

在我的应用程序中，我有一个按钮，每次单击按钮时都会将表单字段集附加到正文中 - 我想将页面向下滚动到新元素，但由于明显的原因（冒泡等）不起作用）。我提出了一个简单的解决办法......

function scroll(pixels){
    $('html, body').animate({
        scrollTop: pixels
    }, 1000);
};

function addObservation(x){
    $('body').append(x);
    newFieldSet = $('fieldset').last();
    pixelsFromTop = newFieldSet.offset().top;
    scroll(pixelsFromTop);
};

$(document).on("click", "#add_observation", function(){
    addObservation("<fieldset>SOME FORM FIELDS HERE</fieldset>");
});

因此，每次添加字段集时，jQuery都会找到添加的最后一个字段集，然后.offset().top测量字段集从顶部开始的像素数，然后滚动距离的窗口。

Answer 7

一种简单易用的方法来监听动态加载的内容上的滚动事件

<div class="scrollDiv" onscroll="LoadHistory()>
...Your contents to scroll goes here
</div>


</script type="text/javascript">

function LoadHistory(){
var pos = $(".scrollDiv").scrollTop();
if (pos == 0) {
  // your code goes in here
}
}
</script>

Answer 8

你应该为你的div指定一个高度，溢出等于auto：

    .myDiv{
    height: 90px;
    overflow: auto;
}

Answer 9

在使用jquery.in（）之前，

元素必须存在于文档中。您可以在使用jquery.on（）之前插入虚拟<div class="mydiv"></div>

$('body').append('<div class="mydiv" style="display:none"></div>');
$(document).on("scroll", ".mydiv", function(){...})

将滚动事件绑定到动态DIV？

9 个答案: