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() {} или загрузить Javascript только в нижней части html тела документа.

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