javascript - 如何在将类添加到元素后触发针对类的方法？

Question

在下面的标记中，#enable 按钮将向 #show div 添加一个类。这个类有一个附加的方法，可以淡入/淡出#hidden范围。

但是，即使该类已添加到 #show div，附加到该类的方法也不会被触发。

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(); 
    });
});​

使用 fiddle :http://jsfiddle.net/jS3nM/

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

Answer 1

jQuery 的工作方式与 CSS 不同。当您这样做时，$("selector")，它将返回文档中当前与该选择器匹配的元素列表。

然后您将使用 jQuery 方法操作这些元素。没有像“类目标方法”这样的魔法发生。

您可以找到向文档添加事件监听器:

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

document 始终可以找到并且始终存在，并且事件监听器会添加到其中。最后的选择器过滤出哪些元素符合该事件的条件。