動的に作成された要素のjquery（ホバーとロード）イベントバインディング

Question

イベントをクラス名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のあなたが複数のイベントを結合して、event objectを経由して、オブジェクトの情報を取得するには、次のアプローチを使用することができます

$(document).ready(function() { 

Answer 2

を使用しています。

$('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を読み込むことを確認してください。 hover以来

Answer 3

はあなたがon（loadがreadyに相当します）を使用して、イベントを使用して書くことができますloadためmouseenterとmouseleaveを使用する必要があり推奨されていません。あなたはどのようにあなたの結合方法を実行している、イベントハンドラをバインドする前にDOMから要素が既に存在していることを確認する必要があり

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