Bind scroll Event To Dynamic DIV?

Question

Например, после использования AJAX у меня будет прокручиваемый DIV. Как связать с ней события прокрутки?

Я пробовал:

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

Но они не работали.

DEMO

Answer 1

элемент должен быть существует в документе, прежде чем использовать jquey.on().

вы можете вставить фиктивный <div class="mydiv"></div>, прежде чем использовать jquery.on()

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

Answer 2

попробовать это модифицированный из кода

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 3

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 4

вы должны указать высоту для вашего DIV с переливом равна авто:

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

Answer 5

Я, имеющий тот же вопрос, и я нашел следующее в jQuery .on() API:

Во всех браузерах события загрузки, прокрутки и ошибки (например, на элементе) не пузырятся. В Internet Explorer 8 и ниже события вставки и сброса не пузырятся. Такие события не поддерживаются для использования с делегированием, но они могут использоваться, когда обработчик события напрямую привязан к элементу, генерирующему событие.

К сожалению, это не представляется возможным.

Answer 6

Я просто возрождаю этот старый вопрос, потому что я не нашел хорошего ответа, и я боролся за лучший способ прослушать событие «прокрутки» для динамически добавленного элемента.

Поскольку в DOM событие Scroll не пузырится из-за этого, мы не можем использовать 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; } 
 
\t 
 
\t .myDiv{ 
 
\t \t height: 90px; 
 
\t \t width: 300px; 
 
\t \t border: 1px solid; 
 
\t \t background-color: lavender; 
 
\t \t overflow: auto; 
 
\t }

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

Answer 7

Это работа, прилагая on непосредственно, проверьте пример ниже.

Надеюсь, это поможет.

$("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>'); 
 

 
$(".myDiv").on("scroll", function(){ 
 
    \t console.log("scrolling"); 
 
}); \t

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

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

Answer 8

В моем приложении, у меня есть кнопка, которая присоединяет форму fieldsets к телу каждый раз, когда кнопка нажата - Я хотел, чтобы прокрутить страницу вниз к новому элементу, но Didn «Работа по очевидным причинам (пузырьки и т. д.). Я придумал простой исправить ...

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

Таким образом, каждый раз, когда вы добавить Fieldset, JQuery находит последний добавил, затем .offset().top меры количества пикселей по FIELDSET от вершины, а затем прокручивает окно, расстояние.