2015-09-05 120 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