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

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在文档上应用并使用类过滤器将事件附加到按钮.

现场演示

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元素的)自动此元素上根据变更后的新类绑定的事件.

了解事件委派

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