Can't listen to hover (etc) events after creating divs using innerHTML
<p>So I generate some divs using this</p>

<pre><code>document.getElementById('container').innerHTML += '&lt;div class="colorBox" id="box'+i+'"&gt;&lt;/div&gt;';
</code></pre>

<p>The problem I'm running into is that catching a hover event</p>

<pre><code>$(".colorBox").hover(function(){
    alert("!");
});
</code></pre>

<p>Won't work after doing that. Any thoughts?</p>

<p>EDIT:
To be more clear, check this out: <a href="http://graysonearle.com/test/16_t.html" rel="nofollow">http://graysonearle.com/test/16_t.html</a></p>

<p>I need to be able to have hover events happen after changing innerHTML that happen dynamically and many times. So like after changing the number of columns, the hover effect needs to work.</p>

<p>THANKS TO CHOSEN ANSWER:
For those in the future that might want to do something similar, my code looks like this now:</p>

<pre><code>$(document).ready(function(){

    document.body.onmousedown = function() { 
      ++mouseDown;
    }
    document.body.onmouseup = function() {
      --mouseDown;
    }

    $(document).on("mouseenter",".colorBox",function(){
        if(mouseDown){
            var clicked = $(this).attr("id");
            var clicked = clicked.substring('box'.length);
            next_color(clicked);
        }       
        $(this).css("border-color","#ff0");
        }).on("mouseleave", ".colorBox", function() {
        $(this).css("border-color","#aaa");
    });

    $(document).on("click",".colorBox",function(){
        var clicked = $(this).attr("id");
        var clicked = clicked.substring('box'.length);
        next_color(clicked);
    });
});
</code></pre>
