5

一旦我使用 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）

4

5 回答 5

9

试试这个，应用于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');
});​

您需要在您想要此动态行为的元素的静态父级上委托事件，以便当元素的类更改（从opentoclose和 from closeto open）时，事件会根据新更改的类自动绑定在该元素上。

了解事件委托

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

于 2012-08-07T13:53:19.850 回答
1

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

检查这个

    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>
于 2012-08-07T13:54:07.567 回答
0

尝试这样的事情：

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

如果您需要动画，可以查看此链接

于 2012-08-07T13:57:17.653 回答
0

如果你想使用下面的代码。

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


jQuery('.toggle').toggle( 
    function() {
        jQuery('div').slideUp();
    },
    function() {
        jQuery('div').slideDown();
    }
);
于 2012-08-07T13:57:44.010 回答
-1

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

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');
});​
于 2012-08-07T13:57:15.573 回答