javascript - JQuery - 将类添加到元素上，然后与该类交互不起作用

Question

当您单击 ( ".toggle-button a") 时，它会向自身添加 .close 类。并在 .info-overlay

中淡出

这工作正常，但是当您再次单击它时，我希望 info-overlay 再次淡出，并且 close 类被删除。但这不起作用。

我在这里遗漏了什么吗？

http://jsfiddle.net/bazzle/xpS9P/1/

html

<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>

CSS

.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};

js

    $( ".toggle-button a" ).click(function() {
    $( ".info-overlay" ).fadeIn("500");
    $(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
    $( ".info-overlay").fadeOut("500");
    $(this).removeClass('close');
});

Answer 1

使用事件委托(delegate):

改变

$( ".toggle-button a.close" ).click(function(){
    $( ".info-overlay").fadeOut("500");
    $(this).removeClass('close');
});

至:

$(document).on('click',".toggle-button a.close",function(){
    $( ".info-overlay").fadeOut("500");
    $(this).removeClass('close');
});

因为 .click() 是附加并忘记处理程序，但 .on() 是动态的。