Question

63

jQuery - How check if any link was clicked in a specific DIV?

rated 0 times [ 69] [ 6] / answers: 1 / hits: 24417 / 13 Years ago, wed, august 24, 2011, 12:00:00

In HTML code my page contains:

<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>

In jQuery if I want to check if the user clicked any link in page I use this code:

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



  // do something



});

How can I start a function if the user clicked only on links in specific div? I would like to have a function that starts if a user clicked any link only in div ID named main_menu AND second_menu, but not in menu_outside.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelyn

Add To Favorites

Follow

Total Points: 619

Total Questions: 102

Total Answers: 104

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

jaelyn questions

1 How to configure vue 3 router children properly to have nested routes working as expected?

Mon, Apr 11, 22, 00:00, 2 Years ago

1 The best way to pass authorization header in nextJs using Apollo client? ReferenceError: localStorage is not defined

Thu, Jul 23, 20, 00:00, 4 Years ago

1 React send multiple requests in a loop and wait

Tue, Apr 28, 20, 00:00, 4 Years ago

1 How can I change the checkbox styles and icons when hover on it in Material-UI React?

Thu, Mar 19, 20, 00:00, 4 Years ago

1 Node.js spawn: Keep StdOut and StdErr in the original order

Mon, Jul 15, 19, 00:00, 5 Years ago

View All

answered 13 Years ago kareem · Accepted Answer

Depending on what exactly you want to do, you can bind the event handler to those links only, using the descendant ^[docs] and multiple ^[docs] selectors:

$('#main_menu a, #second_menu a').click(function() {

    // link inside #main_menu or #second_menu

});

If you don't want to perform the same action for both, you have to bind the event handler individually.

You could also check dynamically whether the link is a descendant of any of these element, with closest ^[docs]:

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

    if($(this).closest(#main_menu).length) {

        // inside #main_menu

    }

    if($(this).closest(#second_menu).length) {

        // inside #second_menu

    }

    //...

});

But that introduces an additional overhead.