Jquery Catching clicking of links outside a specific div

Question

I need to catch the event when a user clicks a hyperlink outside of a specific div element. To demonstrate :

If I have this HTML :

<a id = "1" href="/someurl..">link</a>
<a id = "2" href="/someurl..">link</a>
<a id = "3" href="/someurl..">link</a>

<div id="content">
   <a id = "4" href="/someurl..">link</a>
</div>

I need to catch the event where the user clicks every hyperlink outside of the div with id of "content". But ignore the event when the links inside the div "content" is clicked.

------------------UPDATE----------------

Someone suggested I include what i'm trying to achieve to add clarity. And what the best way to do this is the question.

My use case is that, I have a div where some operations (links) such as sort, edit etc is being utilized. While links outside are links that redirects to other pages. I want to make a confirm modal using bootbox if a user navigates away. I could use the unload but it also fires when I click on the edit,sort operations (links inside the div).

Thanks!

my use case is that, I have a div where some operations (links) such as sort, edit etc is being utilized. While links outside are links that redirects to other pages. I want to make a confirm modal using bootbox if a user navigates away. I could use the unload but it also fires when I click on the edit,sort operations :) — muffin, May 13 '15 at 15:14
You may want to include that info in the question. There are loads of ways to do what your asking, some may be better than others given the specific situation. — apaul, May 13 '15 at 15:15
This may be what you're after: http://stackoverflow.com/questions/7080269/javascript-before-leaving-the-page — apaul, May 13 '15 at 15:22
I've also tried that but as ive mentioned it kinda 'mistakes' other links inside the div content because they still unload the page. It does the job, but I want it to be selective. — muffin, May 13 '15 at 15:26

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

You can use jQuery's siblings() method to target specifically the siblings of your div element:

.siblings( [selector ] )

Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

$('#content').siblings('a').on('click', function() { ... });

edited Jun 20 '20 at 09:12

Community

1
1

answered May 13 '15 at 15:09

James Donnelly

126,410
34
208
218

this is by far the cleanest!, but i'll give upvotes to other answer because they too are correct thanks :) – muffin May 13 '15 at 15:32

score 3 · Answer 2 · edited May 13 '15 at 15:21

3

you can use the .not() operator or :not.

$('a').not('#content a').click(function(){
    //...do something
})

edited May 13 '15 at 15:21

A. Wolff

74,033
9
94
155

answered May 13 '15 at 15:09

ntgCleaner

5,865
9
48
86

1

content is an ID :) #content not .content – Mohamed-Yousef May 13 '15 at 15:15
1

woops! sorry! Good catch – ntgCleaner May 13 '15 at 18:20

Mohamed-Yousef · Answer 3 · 2015-05-13T15:23:41.930

3

use :not()

$('a:not(#content a)')

DEMO

edited May 13 '15 at 15:23

answered May 13 '15 at 15:10

Mohamed-Yousef

23,946
3
19
28

score 2 · Answer 4 · answered May 13 '15 at 15:09

2

There are many ways. One way

$('a').click(
    function(){
        if($(this).closest('#content')){
            return;
    }
});

closest checks if there is a parent element with id content.

answered May 13 '15 at 15:09

AmmarCSE

30,079
5
45
53

Jquery Catching clicking of links outside a specific div

4 Answers4