jQuery - .on滚动不能处理新添加的div

时间:2013-04-29 23:49:32

标签: jquery events scroll

我有一个“Window Add”按钮,点击它后,应该在dom中添加一个新的div。新div上的scroll事件不希望附加到它并在滚动时显示警报。我知道,因为它是新添加的,我们需要集成on事件处理程序,但这仍然不适合我。这是我试过的:

<div id="window-add">Window Add</div>

$('#window-add').click(function(){
    $(this).after('<div id="scroll-window">Scroll Me.</div>');
});

//using on doesn't work below either
$('#scroll-window').scroll(function(){
    alert('scrolling');
});

有关如何使其发挥作用的任何想法? 这是fiddle

2 个答案:

答案 0 :(得分:3)

  1. ID 每页必须是唯一的。 (您正在添加多个ID)

  2. 您只是将不可滚动的元素添加到正文
    实际上滚动正文元素,你不能指望$('#scroll-window')调用scroll事件。

  3. 使用jQuery 1.6.4 (Lilke在你的小提琴中)你必须使用.bind()做这样的事情:

    LIVE DEMO

    var scrollWindow = $('<div>', {
        id:"scroll-window",
        html: "Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me.Scroll Me."
    });
    
    
    $('#window-add').click(function(){
        $(this).after(scrollWindow);
    });
    
    // IF YOU USE jQ (1.7+) you can use .on() method instead of .bind()
    scrollWindow.bind('scroll', function(){
        alert('scrolling');
    });
    
      

    jQuery&lt; 1.7使用.bind()
      jQuery 1.7+使用.on()

答案 1 :(得分:0)

$('#window-add').click(function () {
  $(this).after('<div id="scroll-window">Scroll Me.</div>');
  $(window, this).scroll(function () {
    alert('scrolling');
  });
});

这对你有用吗?

http://jsfiddle.net/rJFCz/3/