Question

I have a list of blocks, for each block their is a css change by jquery on mouseover/out.

I have a button that is job is to add one more block to the list.
It do it great! But the new block not respond to the mouseover/out jquery set.

This is my blocks and the add:

        <div class='blocks'>
            <div class='block'>
                <div class='block-top'></div>
                Default Text Here
            </div>
            <div class='block'>
                <div class='block-top'></div>
                Default Text Here
            </div>
            <div class='block'>
                <div class='block-top'></div>
                Default Text Here
            </div>
        </div>
        <a href='#' id='addBlock'>Add Block</a>

And this is the javascipt:

$(document).ready(function() {
            var inEdit=0;
            $(".block").hoverIntent(function() {
                if(inEdit==0) {
                    $(this).children('.block-top').delay(300).animate({opacity:1},600);
                    $(this).delay(300).animate({borderColor: '#8f8f8f'},600);
                }
            },function() {
                if(inEdit==0) {
                    $(this).children('.block-top').animate({opacity:0},200);
                    $(this).animate({borderColor: '#ffffff'},200);
                }
            });
            $('#addBlock').click(function() {
                $('.blocks').append("<div class='block'><div class='block-top'></div>Default Text Here</div>");

            });
        });

I’m using this two scripts:
http://www.bitstorm.org/jquery/color-animation/
http://cherne.net/brian/resources/jquery.hoverIntent.html

What can I do?

Thanks

Answer 1

If you wish that future elements benefits from the event, you have to use on : http://api.jquery.com/on/

For instance :

$('#addBlock').on('click', function() {
    $('.blocks').append("<div class='block'><div class='block-top'></div>Default Text Here</div>");
});