javascript - 多次调用 jQuery 函数

Question

所以，我在 jQuery 中有这个功能：

$(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" );
  });

这基本上在文档上注册了事件。单击标题时，事件会冒泡到文档。在那里，给定的选择器被验证并在需要时执行该函数。

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");
});