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

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

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

Answer 1

jQuery不像CSS那样工作。执行$("selector")时，它将返回文档中与该选择器匹配的元素列表。

然后，您将使用jQuery方法对这些元素进行操作。没有像“类定向方法”那样的魔术。

您可以找到向document添加事件监听器：

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

总是找到

document并且始终存在，并且将事件侦听器添加到其中。最后的选择器会筛选出符合事件条件的元素。

Answer 2

因为当您绑定hover处理程序时，文档中没有类testing的元素，您应该委派该事件，您可以使用on方法，尝试以下方法“

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

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

如何在将类添加到元素后触发以类为目标的方法？

2 个答案: