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

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