Why Stackoverflow binds user actions dynamically with javascript?

Question

Checking the HTML source of a question I see for instance:

<a id="comments-link-xxxxx" class="comments-link">add comment</a><noscript>&nbsp;JavaScript is needed to access comments.</noscript>

And then in the javascript source:

// Setup our click events..
$().ready(function() {    
        $("a[id^='comments-link-']").click(function() { comments.show($(this).attr("id").substr("comments-link-".length)); });    
});

It seems that all the user click events are binded this way.

The downsides of this approach are obvious for people browsing the site with no javascript but, what are the advantages of adding events dynamically whith javascript over declaring them directly?

Answer 1

The only advantage I see is a reduction of the page size, and thus a lower bandwith need.

Edit: As I'm being downvoted, let met explain a more my answer.

My point is that, using a link as an empty anchor is just a bad practice, nothing else! Of course separation of JavaScript logic from HTML is great. Of course it's easier to refactor and debug. But here, it's against the main principle of unobtrusive JavaScript: Gracefull degradation!

A good solution would be to have to possible call of the comments: one through a REAL link that will point to a simple page showing the comment and another which returns only the comments (in a JSON notation or similar format) with the purpose of being called through AJAX to be injected directly in the main page.

Doing so, the method using the AJAX method should also take care of cancelling the other call, to avoid that the user is redirected to the simple page. That would be Unobtrusive JavaScript. Here it's just JavaScript put on a misused anchor tag.

Answer 2

This way you can have a light-weight page where you can handle all your actions via javascript. Instead of having to use loads of different urls and actions embedded into the page, just write one javascript function that finds the link, and hooks it up, no matter where on the page you dump that 'comment' link. This saves loads of repeating html :)

Answer 3

• You don't have to type the same string over and over again in the HTML (which if nothing else would increase the number of typos to debug)
• You can hand over the HTML/CSS to a designer who need not have any javascript skills
• You have programmatic control over what callbacks are called and when
• It's more elegant because it fits the conceptual separation between layout and behaviour
• It's easier to modify and refactor

On the last point, imagine if you wanted to add a "show comments" icon somewhere else in the template. It'd be very easy to bind the same callback to the icon.

Answer 4

Attaching events via the events API instead of in the mark-up is the core of unobtrusive javascript. You are welcome to read this wikipedia article for a complete overview of why unobtrusive javascripting is important.

The same way that you separate styles from mark-up you want to separate scripts from mark-up, including events.

Answer 5

I see this as one of the fundamental principals of good software development:

The separation of presentation and logic.

HTML/CSS is a presentation language essentially. Javascript is for creating logic. It is a good practice to separate any logic from your presentation if possible.