Question

I have 3 box with jquery effect and one box that created when i click “Click to create Jquery Box”
my problem is when i create jquery box with .html() method new created box does not accept jquery effect like other html boxes

demo
http://jsfiddle.net/afshinprofe/f9s6X/

HTML

    <h2>Click to Add JQuery Box</h2>
<div class="box">Html Box 1</div>
<div class="box">Html Box 2</div>
<div class="box">Html Box 3</div>
<div id="res"></div>

CSS

   .box{
    width:50px;
    height:50px;
    background-color:gray;
    color:white;
    float:left;
    border:medium blue solid;
    margin:10px;
   }

JQuery

$("h2").click(function(){
    $("#res").html('<div class="box">JQuery Box 4</div>');
});
$(".box").hover(function () {
$(this).css("color","red");},
function(){
$(this).css("color","white");
});

Answer 1

If you just bind the hover event to elements of the box class it will work on the elements that are in the DOM at that moment. It’s not a live binding however. You need to use .on() for that.

Example:

$("body").on('mouseenter', '.box', function () {
    $(this).css("color","red");
}).on('mouseleave', '.box', function(){
    $(this).css("color","white");
});

Fixed fiddle