0

在下面的标记中，#enable按钮将向#showdiv 添加一个类。这个类附加了一个淡入/淡出#hidden跨度的方法。

但是，即使将类添加到#showdiv，也不会触发附加到类的方法。

HTML

<input type='button' id='enable' value='Enable' />

<div id='show'>
Testing.. <span id='hidden'>Testing, 1, 2, 3.</span>
</div>​

JS

$(function() {

    // Adds .testing class after the button is clicked. however..
    $('#enable').click(function() { 
        $('#show').addClass('testing')
    });

    // It will not trigger after .testing class has been added to DIV?            
    $('.testing').hover(function() { 
        $('#hidden').fadeIn(); 
    }, function() {
        $('#hidden').fadeOut(); 
    });
});​

使用小提琴：http: //jsfiddle.net/jS3nM/

看来我在概念上遗漏了一些东西。处理这个问题的正确方法是什么？

4

2 回答 2

2

jQuery 不像 CSS 那样工作。当您这样做时$("selector")，它会立即返回文档中与该选择器匹配的元素列表。

然后，您将使用 jQuery 方法对这些元素进行操作。没有像“以类为目标的方法”这样的魔法。

您可以找到将事件侦听器添加到document：

$(document).on({
    mouseenter: function() {
        $('#hidden').fadeIn();
    },
    mouseleave: function() {
        $('#hidden').fadeOut();
    }
}, ".testing");

document总是被找到并且总是存在，并且事件监听器被添加到其中。最后的选择器过滤掉哪些元素符合事件的条件。

于 2012-08-12T21:50:40.840 回答
1

因为当你绑定hoverhandler时，文档中没有class oftesting的元素，你应该委托事件，你可以使用on方法，试试下面的“

$(document).on('mouseenter', '.testing', function(e) { 
        $('#hidden').fadeIn(); 
});

$(document).on('mouseleave', '.testing', function(e) { 
        $('#hidden').fadeOut(); 
});
于 2012-08-12T21:47:23.133 回答