Global Javascript link handler

Question

Here's what I have:

A web application that runs in a single HTML page (call it myapp.req), with content coming and going via AJAX
The application can be entered externally with a link such as myapp.req?id=123, and the application opens a tab with the item at id 123
The content on the page is mostly user's content, and many times has inner-application links to myapp.req?id=123
The problem is that clicking a link to myapp.req?id=123 reloads the browser, and removes any content or state that the user had loaded

What I want is to be able to catch link clicks whose destination is myapp.req?id=123, and instead of reloading the page, just open the tab for item 123, leaving anything else currently loaded alone. If the link is for an external website, though, obviously just let the browser leave.

So my question really: Can I have a global link handler that checks if I want to handle the link click, and if so, run some Javascript and don't leave?

I understand I could find all <a>s and add listeners, but my hope is that the solution would only require setting up the listener once, and not adding link handlers every time new content is loaded on the page. Since content can be loaded many different ways, it would be cumbersome to add code to all those places.

Does that make sense?

score 2 · Answer 1 · answered Aug 18 '11 at 19:19

2

jQuery's live is what you need:

$('a').live("click", function () {
    var myID = $(this).attr('href').match(/id=([a-zA-Z0-9_-]*)\&?/)[1];
    if (myID) {
        //run code here
        alert(myID);
        return false;
    }
});

Any link will now have this click handler whether it's been added after this is called or not.

answered Aug 18 '11 at 19:19

Joe

80,724
18
127
145

Unfortunately jQuery isn't an optionin my application right now, so I went with another answer as the solution. Thanks for this info though! – Sean Adkinson Aug 18 '11 at 21:21

score 1 · Accepted Answer · answered Aug 18 '11 at 19:39

1

Sure you can. Add a clickhandler on the body. So you catch all clicks. Then you have to check if the target of the event or one of its parent is a link with your specific href. In this case stop the event and open the tab.

answered Aug 18 '11 at 19:39

Andreas Köberle

106,652
57
273
297

Blazemonger · Answer 3 · 2011-08-18T19:29:03.930

0

updated to use .live instead of .click

If you use jQuery, you can add a "live" click event handler to every a href at once:

<body>
    <a href="app.req?id=123&test=432">click here</a>
    <br/>
    <a href="http://whatever.com">whatever</a>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"> 
$('a').live('click',function() {
    var myID = $(this).attr('href').match(/id=([a-zA-Z0-9_-]*)\&?/)[1];
    if (myID) {
        //run code here
        alert(myID);
        return false;
    }
});
</script>

This should extract the id from the href's query string and let you do whatever you want with it.

edited Aug 18 '11 at 19:29

answered Aug 18 '11 at 19:05

Blazemonger

90,923
26
142
180

Unfortunately this is what I was trying to avoid. The code you provided would only add the listener for every link that is currently on the page, but the content of the page changes all the time, and new links can be rendered often. Thus I would need to run your code every time I render new content. Instead, I'm hoping for a global listener that simply always gets to run when any link is clicked, before the browser leaves the page. – Sean Adkinson Aug 18 '11 at 19:15
1

instead of a click use live.. it should take care of any new elements coming into the page.. – Baz1nga Aug 18 '11 at 19:17

Global Javascript link handler

3 Answers3