绑定滚动事件动态DIV？(Bind scroll Event To Dynamic DIV?)

例如，使用AJAX后，我将有一个滚动的DIV。如何绑定滚动事件呢？

我试过了：

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

但他们没有工作。

DEMO

Answer 1:

我只是恢复这个老问题，因为我没有找到很好的答案，我挣扎着自己的更好的方式来听“滚动”事件动态附加元素。

由于滚动事件不会在DOM冒泡由于这一点，我们不能用在（）就像我们使用的滚动。所以，我想出了在那里我会要听的“滚动”事件的元素听我自己的自定义触发事件 。

该元素在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。对（）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:

它的工作通过附加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 6:

在我的应用程序，我有一个按钮，每一个按钮被点击时附加形式的fieldsets的身体 - 我想滚动页面到新的元素，但没有明显的原因（冒泡等）工作。我想出了一个简单的解决...

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的高度：

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

Answer 8:

使用jquey.on之前元素必须在文件存在（）。

可以插入虚设<div class="mydiv"></div>使用jquery.on（）之前

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

文章来源: Bind scroll Event To Dynamic DIV?