There are many ways to write clean(er) code. I prefer to separate my handler methods (using named functions) from the handling code, use data-attributes to query and use event delegation. For your example, the code could be rewritten to something like:
function changeLabelText(e){
var self = $(this);
self.text(self.attr('data-changeOnClick'));
}
$(document).on('click', '[data-changeOnClick]', changeLabelText);
Where <label>
would become <label data-changeOnClick="[changed text]">
In that case, changing the label text later would be as simple as changing the data-changeOnClick
attribute in the html. Furthermore, it's easy to add the attribute to any element in your html, which will all trigger the click handler.
Writing separate handler methods also shows the methods in the aforementioned 'visual event 2' bookmarklet.
Furthermore, I always load my scripting at the end of the document (right before the closing </body>
-tag), to avoid having to wrap method assignment within $(function() {/*...*/} )
or more generally having to use document load-handling.
See this jsFiddle