更新类后jQuery单击功能不起作用

Question

一旦我使用jQuery更改了元素的类，单击函数就不能在新的类上工作。

以下是我的代码

jQuery('.close').on('click', function() {
    jQuery('div').slideUp();
    jQuery(this).addClass('open');
    jQuery(this).removeClass('close');
});


jQuery('.open').on('click', function() {
    jQuery('div').slideDown();
    jQuery(this).addClass('close');
    jQuery(this).removeClass('open');
});​

你可以在这里尝试一下- http://jsfiddle.net/NkG9k/1/

再次尝试单击切换按钮。(它不会滑下div)

Answer 1

尝试一下，在文档上应用on，并使用类过滤器将事件附加到按钮上。

jQuery(document).on('click','.close', function() {
    jQuery('div').slideUp();
    jQuery(this).addClass('open');
    jQuery(this).removeClass('close');
});


jQuery(document).on('click','.open', function() {
    jQuery('div').slideDown();
    jQuery(this).addClass('close');
    jQuery(this).removeClass('open');
});​

您需要在您想要这种动态行为的元素的静态父元素上委托事件，以便当元素的类发生更改(从open更改为close，从close更改为open)时，事件会根据新更改的类自动绑定到此元素上。

Understanding Event Delegation

事件委派允许我们将单个事件侦听器附加到父元素，该侦听器将为与选择器匹配的所有后代触发，无论这些后代现在存在还是将来添加。

Answer 2

您已经删除了触发事件的类。你可以给它一个id，然后用id而不是class来调用它。

check this

    jQuery('#close').toggle( function() {
    jQuery('div').slideUp();
    jQuery(this).addClass('open');
    jQuery(this).removeClass('close');
},function() {
    jQuery('div').slideDown();
    jQuery(this).addClass('close');
    jQuery(this).removeClass('open');
});
<div id="close" class="close">toggle</div>

Answer 3

尝试如下所示：

$('.close').bind('click', function() {
 $('div').toggle();
});

如果你需要动画，你可以查看这个link