Question

我有一个块列表，对于每个块，它们是通过jquery在mouseover / out上进行css更改。

我有一个按钮，工作就是在列表中再添加一个块。它做得很棒！但是新块不响应mouseover / out jquery set。

这是我的块和添加：

        <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

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

例如：

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

Answer 2

使用jquery live（）方法，即使用下面的代码

$(".block").live('hoverIntent', function() {  //this line is modified
            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);
            }
        });

进行一些调整，为事件'hoverIntent'添加2个函数。我的意思是这将起作用

    $(".block").live('hoverIntent', function() {  //this line is modified
            if(inEdit==0) {
                $(this).children('.block-top').delay(300).animate({opacity:1},600);
                $(this).delay(300).animate({borderColor: '#8f8f8f'},600);
            }
        });

但要有两个功能，你可以试试

    $(".block").live('hoverIntent', function() {  //this line is modified
            if(inEdit==0) {
                $(this).children('.block-top').delay(400).animate({opacity:1},600);
                $(this).delay(400).animate({borderColor: '#8f8f8f'},600);
            }

            if(inEdit==0) {
                $(this).children('.block-top').animate({opacity:0},200);
                $(this).animate({borderColor: '#ffffff'},200);
            }
        });

Answer 3

您正在将hoverintent绑定到加载时不存在的元素。因此新元素不会获得事件处理程序。您必须使用.Delegate（）或.on（）/。off（）取决于您的jQuery版本信息如何使用每个可以在下面找到

http://api.jquery.com/delegate/
http://api.jquery.com/on/

然而，由于hoverIntent使用jquerys mouseover，我不知道它是否有特定的eventType，你可以用于委托/上

Answer 4

这个问题是关于在新元素上使用hoverIntent。关于同样的事情正是这个其他主题，请查看答案：

help with understanding the logic behind how javascript executes on new dom elements being created on the fly

在追加后初始化jquery

4 个答案: