動態創建元素上的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"/>