2013-04-29 77 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/