多次调用jQuery函数

所以，我在jQuery中有这个function：

$(function(){ $( ".unfocused" ).click(function ClickHeader () { $( this ).addClass( "focused" ); $( this ).removeClass( "unfocused" ); $(".header").not(this).addClass( "unfocused" ); $(".header").not(this).removeClass( "focused" ); }); }); 

它在第一次单击标题时工作正常，但是当我尝试单击另一个未聚焦的标题时，该函数不再起作用。 是因为它在文档.ready上运行吗？
谢谢你的帮助！

Answer 1

像这样改变它：

  $( document ).on("click", ".unfocused", function() { $( this ).addClass( "focused" ); $( this ).removeClass( "unfocused" ); $(".header").not(this).addClass( "unfocused" ); $(".header").not(this).removeClass( "focused" ); }); 

这基本上将事件记录在文档上。 单击标题时，事件会冒泡到文档。 在那里，validation给定的选择器并在需要时执行该function。

Answer 2

这是一个jsfiddle使用委托操作来处理您需要的事件。

http://jsfiddle.net/MN9Zt/2/

 $("body").delegate(".unfocused", "click", function() { $(this).addClass("focused"); $(this).removeClass("unfocused"); $(".header").not(this).addClass("unfocused"); $(".header").not(this).removeClass("focused"); });