2013-04-29 76 views
0

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

<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

+0

确保在文档中多次添加具有相同ID的元素。 – Ejaz 2013-04-29 23:51:18

+0

@Ejay我确定Ejay。检查小提琴 – Wonka 2013-04-29 23:52:30

+0

你尝试设置溢出滚动? – Rob 2013-04-29 23:52:57

回答

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

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

使用jQuery 1.6.4 (Lilke在你的提琴),你必须使用.bind()做somethog这样的:

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的< 1.7使用.bind()
jQuery 1.7+使用.on()

+0

好的,抱歉的并发症。如果你点击一次,它将是唯一的(所以只需点击一次)。然后,我尝试使用.on在新窗口中注册滚动,但它不起作用 – Wonka 2013-04-29 23:59:43

+0

@Wonka你说“新窗口”是什么意思?什么是新窗口?只有'$(window)'才会注册'scroll event' http://jsfiddle.net/rJFCz/10/,除非您为添加的元素使用CSS溢出。 – 2013-04-30 00:01:17

+0

这是一个新的小提琴。我真的想用.on http://jsfiddle.net/rJFCz/12/ – Wonka 2013-04-30 00:01:24

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/