jquery点击处理程序只能工作一次

问题描述：

我已经开始学习jquery（今天），并正在通过一些非常简单的例子，但已经遇到了问题。点击一天的按钮，我改变身体，并为夜间按钮再次提供不同的背景。（我知道很简单），但我发现的是，点击处理程序只工作一次，如果我先点击夜间按钮，然后一天按钮不会工作？jquery点击处理程序只能工作一次

任何人都可以建议或与之分享最佳做法？

在

http://jsbin.com/ufadul/3/edit

实例非常感谢

你需要交朋友在浏览器中使用JavaScript调试器。如果您怀疑点击处理程序无法用于后续点击，就像您一样，不要假设，在点击处理程序中设置断点并单击该按钮。您会立即注意到该处理程序正在运行，并且该类将添加到正文中。如果您之后在浏览器中使用了DOM检查器，则会立即看到问题。 [于是去安装Chrome浏览器，然后按F12事不宜迟！（http://www.youtube.com/watch?v=NLqswS6r-e0） – bzlm 2012-08-01 09:25:25

答

该脚本将继续增加这些类，你的身体标记，而不是取代它们。由于在CSS中的位置，.night优先于.day。

使用以下方法来防止这种情况发生：

$(function() { 
    $('button#first').click(function() { 
     $('body').removeClass('night'); 
     $('body').addClass('day'); 
    }); 

    $('button#second').click(function() { 
     $('body').removeClass('day'); 
     $('body').addClass('night'); 
    }); 

    });

你刚才打我给它 – CKKiller 2012-08-01 09:17:45

黑暗为准！哦，只是CSS订购。对。 – bzlm 2012-08-01 09:18:07

感谢curt，我明白了，菜鸟的错误:) – Richlewis 2012-08-01 09:20:35

答

尝试删除类也本应理清您的问题

$(function() { 
    $('button#first').click(function() { 
     $('body').addClass('day'); 
     $('body').removeClass('night'); 
    }); 

    $('button#second').click(function() { 
     $('body').addClass('night'); 
    $('body').removeClass('day'); 
    }); 

    });

答

$(function() { 
    $('button#first').click(function() { 
     $('body').attr('class','day'); 
    }); 

    $('button#second').click(function() { 
     $('body').attr('class','night'); 
    }); 

});

demo

jquery点击处理程序只能工作一次

相关推荐