动态创建元素上的jQuery（悬停和加载）事件绑定

Question

我可以将click事件绑定到具有类名keybox元素。 并且该元素是动态生成的。

$('body').on('click','.keybox', function(){
// some code here
});

但是对于同一元素，我尝试使用以下代码绑定hover和load事件：

$('body').on('hover','.keybox', function(){
// some code here
});


$('body').on('load','.keybox', function(){
// some code here
});

....并且无法正常工作。

有人可以解决这个问题吗？ 我想将hover和load事件绑定到具有类名keybox元素，并且该元素是动态生成的。

Answer 1

代替悬停，使用mouseenter和mouseleave事件。 代替body.load使用

$(document).ready(function() {

Answer 2

您可以使用以下方法来绑定多个事件并通过event object获取对象信息。

$('body').bind('click hover load', '.keybox', function(e){
   if ( e.type === 'hover') {
     // do something
   }
   else if(e.type === 'click') {
    // do something
   }
   ....
});

确保在$(document).ready(function() {}绑定事件，或仅在html文档正文底部加载javascript。

Answer 3

由于不建议使用hover因此应该使用mouseenter和mouseleave进行load ，可以使用on编写事件（ load等于ready ）。

 $(function(){ $(document).on('mouseenter', '.keybox', function () { $(this).css('color','red'); }); $(document).on('mouseleave', '.keybox', function () { $(this).css('color','black'); }); $(document).on('click', '.keybox', function () {// click on dynamically loaded events. $(this).css('color','green'); }); $('#btn').click(function() { $('#parent').append("<div class='keybox'>sample1</div>"); $('#parent').append("<div class='keybox'>sample2</div>"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent"> zdhsdhsau </div> <input type="button" id="btn" value="create"/>