Question

在HTML代码中，我的页面包含：

<div id="main_menu">
  <a href="#" id="login">Link1</a>
  <a href="#" id="logout">Link2</a>
</div>
<div id="second_menu">
  <a href="#" id="information">Link info</a>
  <a href="#" id="profile">My profile</a>
</div>
<div id="menu_oustide"><a href="#" id="something">Link1</a></div>

在jQuery中，如果我想检查用户是否点击了页面中的任何链接，我会使用以下代码：

$('a').click(function() { 

  // do something

});

如果用户仅点击特定div中的链接，我该如何启动功能？我希望有一个函数，如果用户仅在名为“main_menu”和“second_menu”的div ID中点击任何链接，但在“menu_outside”中没有。

Answer 1

根据您想要做什么，您可以使用descendant ^[docs]和multiple ^[docs]选择器将事件处理程序仅绑定到这些链接：

$('#main_menu a, #second_menu a').click(function() {
    // link inside #main_menu or #second_menu
});

如果您不想对两者执行相同的操作，则必须单独绑定事件处理程序。

你可以动态检查链接是否是这些元素的后代，closest ^[docs]：

$('a').click(function() {
    if($(this).closest("#main_menu").length) {
        // inside #main_menu
    }
    if($(this).closest("#second_menu").length) {
        // inside #second_menu
    }
    //...
});

但这会带来额外的开销。

Answer 2

用它来选择你想要的div和ahref。

 $('#second_menu a').click(function(){
    // This will select the a href's only in the second menu.
    // basically, in div id "#second_menu" select all "a" elements.
 });

jQuery - 如何检查特定DIV中是否有任何链接被点击？

2 个答案: