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）。

＆＃13;

$(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>"); 
    });
});

＆＃13;

<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"/>

＆＃13;

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

3 个答案: