2015-09-05 115 views
0

我動態地添加一個<div>元素與類名requirement,我想要實現的是當scroll事件發生在這個div內部時,執行我的功能。滾動事件不綁定動態添加元素jquery

HTML

<div class="scroll requirement" > 

jQuery的

$(document).on('scroll','.requirement',function(){alert("hello")}); 

回答

1

這是很奇怪的,我想它,因爲事件可以觸發如此頻繁。它的工作原理,如果它是在創建反彈...

$(document).ready(function(){ 
 
\t $('#add').click(function(){ 
 
     $('body').append('<div class="scroll requirement" ><br><br><br><br><br><br><br><br><br><br><br><br><br></div>'); 
 
     $('.requirement').on('scroll',function(){alert("hello")}); 
 
    }); 
 
});
/*.pane{ 
 
    min-height:2000px; 
 
    min-height:400px; 
 
    
 
} 
 
.requirement{ 
 
    max-height:100px; 
 
    overflow:scroll; 
 
} 
 
}*/ 
 

 
\t \t body{ font-family: tahoma; font-size: 12px; } 
 
\t div.requirement{ 
 
\t \t height: 90px; 
 
\t \t width: 300px; 
 
\t \t border: 1px solid; 
 
\t \t background-color: lavender; 
 
\t \t overflow: auto; 
 
\t }
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
<body> 
 
<div class="scroll requirement" > 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</div> 
 

 
<button id="add">Add another pane</button> 
 
    </body> 
 
    </html>

在線裝訂然而作品...

$(document).ready(function(){ 
 
\t $('#add').click(function(){ 
 
     $('body').append('<div class="scroll requirement" onscroll="scrollHandler()" ><br><br><br><br><br><br><br><br><br><br><br><br><br></div>'); 
 
    // $('.requirement').on('scroll',function(){alert("hello")}); 
 
    }); 
 

 
}); 
 
    function scrollHandler(){ 
 
    alert('hello'); 
 
    }
/*.pane{ 
 
    min-height:2000px; 
 
    min-height:400px; 
 
    
 
} 
 
.requirement{ 
 
    max-height:100px; 
 
    overflow:scroll; 
 
} 
 
}*/ 
 

 
\t \t body{ font-family: tahoma; font-size: 12px; } 
 
\t div.requirement{ 
 
\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> 
 
<body> 
 
<div class="scroll requirement" onscroll="scrollHandler()" > 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</div> 
 

 
<button id="add">Add another pane</button> 
 
    </body>

+0

我加入分度類「需求'動態與ajax後調用,它不適合我,感謝回覆。 –

+0

@AnjaneyuluBatta我可以爲你找到的唯一事情是綁定事件內聯 – kurt