Liên kết cuộn sự kiện thành DIV động?

Question

Ví dụ: sau khi sử dụng AJAX, tôi sẽ có DIV cuộn được. Làm cách nào để liên kết sự kiện cuộn với nó?

Tôi đã thử:

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

Nhưng họ đã không làm việc.

DEMO

Answer 1

phần tử phải được tồn tại trong tài liệu trước khi sử dụng jquey.on().

bạn có thể chèn hình nộm <div class="mydiv"></div> trước khi sử dụng jquery.on()

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

Answer 2

thử này được sửa đổi từ mã của bạn

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

Hope trợ giúp này

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

bạn nên chỉ định một chiều cao cho div của bạn với tràn bằng tự động:

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

Answer 5

Tôi đang gặp vấn đề tương tự và tôi đã tìm thấy sau trong jQuery .on() API:

Trong tất cả các trình duyệt, các sự kiện tải, cuộn và lỗi (ví dụ: trên một phần tử) không bị bong bóng. Trong Internet Explorer 8 trở xuống, các sự kiện dán và đặt lại không bị bong bóng. Các sự kiện như vậy không được hỗ trợ để sử dụng với ủy quyền, nhưng chúng có thể được sử dụng khi trình xử lý sự kiện được gắn trực tiếp vào phần tử tạo sự kiện.

Rất tiếc điều này dường như không thể thực hiện được.

Answer 6

Tôi chỉ đang hồi sinh câu hỏi cũ này bởi vì tôi không tìm được câu trả lời hay và tôi đã đấu tranh bản thân để có cách tốt hơn để nghe sự kiện 'cuộn' cho phần tử được thêm vào động.

Vì sự kiện cuộn không phát sinh trong DOM do điều này, chúng tôi không thể sử dụng trên() như chúng tôi sử dụng để cuộn. Vì vậy, tôi đã đưa ra nghe sự kiện được kích hoạt tùy chỉnh của riêng tôi trong phần tử mà tôi muốn nghe sự kiện 'cuộn'.

Sự kiện cuộn được liên kết sau khi phần tử được nối thêm vào DOM, sau đó kích hoạt sự kiện tùy chỉnh của riêng tôi.

$("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

Đó là công việc bằng cách gắn on trực tiếp, kiểm tra ví dụ dưới đây.

Hy vọng điều này sẽ hữu ích.

$("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

Trong ứng dụng của tôi, tôi có một nút mà gắn thêm fieldsets hình thức cho cơ thể mỗi khi một nút được nhấp - Tôi muốn cuộn trang xuống để các yếu tố mới, nhưng didn rằng 't làm việc vì lý do rõ ràng (bubbling, vv). Tôi đã đưa ra một giải pháp đơn giản ...

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

Vì vậy, mỗi khi bạn thêm một fieldset, jQuery tìm thấy người cuối cùng nói thêm, sau đó .offset().top biện pháp bao nhiêu điểm ảnh các fieldset là từ trên xuống và sau đó cuộn cửa sổ khoảng cách.