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

多次调用jQuery函数

2 个答案: