javascript - 追加后初始化jquery

Question

我有一个 block 列表，对于每个 block ，它们都是 jquery 在鼠标悬停/移出时更改的 css。

我有一个按钮，它的工作是向列表中添加一个 block 。 它做得很好!但是新 block 不响应 mouseover/out jquery 集。

这是我的 block 和添加:

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

这是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>");

            });
        });

我正在使用这两个脚本:
http://www.bitstorm.org/jquery/color-animation/
http://cherne.net/brian/resources/jquery.hoverIntent.html

我能做什么？

谢谢

Answer 1

如果你希望 future 的元素从事件中受益，你必须使用on:http://api.jquery.com/on/

例如:

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