Question

一旦我使用jQuery更改了元素的类，click函数就不能用于新类。

这是我的代码

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并使用类过滤器将事件附加到按钮。

<强> Live Demo

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到{{1根据新更改的类，事件在此元素上自动绑定的元素。

Understanding Event Delegation

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

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

Answer 4

如果您想使用以下代码。

<button class="toggle">toggle</button> 
<div>THIS IS TEXT</div>


jQuery('.toggle').toggle( 
    function() {
        jQuery('div').slideUp();
    },
    function() {
        jQuery('div').slideDown();
    }
);

Answer 5

在创建元素时，您应该使用实时事件而不是单击作为实时事件

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


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

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

5 个答案: