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

Question

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

我试过了：

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

但他们没有工作。

演示

Answer 1

我只是在重新提出这个老问题，因为我没有找到好的答案，并且我努力寻找更好的方法来聆听动态附加元素的“滚动”事件。

由于 Scroll 事件不会在 DOM 中冒泡，因此我们不能像使用滚动一样使用 on()。所以我想出了在我想要监听“滚动”事件的元素中监听我自己的自定义触发事件。

在将元素附加到 DOM 之后绑定滚动事件，然后触发我自己的自定义事件。

$("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");
    })
}

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

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

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

在动态加载的内容上侦听滚动事件的简单方法

<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 6

它可以通过直接附加来工作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;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 7

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

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 8

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

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

Answer 9

在使用 jquey.on() 之前，元素必须存在于文档中。

<div class="mydiv"></div>您可以在使用 jquery.on() 之前插入虚拟对象

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