I'm looking for a good 10 minute introduction to Unobtrusive Javascript using JQuery. I'm completely new to the concept, and I'd like to see how the event binding and such works.
As some background, I'm looking to do a "remove this tag" system similar to what we have here on SO. Looking at the source, I didn't see any js, just an img tag. That makes me think there must be external js that's binding to the click event. I want to know how to do that, and I want a tutorial that shows me how!
Hi Micah, looks like a whole slew of them here:
http://docs.jquery.com/Tutorials
Hope this helps!
Adam
I guess the Tutorials page on jQuery homepage would be a good place to start :)
Simple example to remove a link you have clicked on follows:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
// execute script only when DOM has finished loading
$(document).ready(function() {
$('#removeme').click(function() {
// remove element that has been target of the event
$(this).remove();
// stop browser from following the link
return false;
});
});
</script>
</head>
<body>
<p>
<a id="removeme" href="http://example.org">Remove me</a>
</p>
</body>
</html>
Hello Micha, I recently found a nice article on non obtrusive javascript with jQuery. The article is by Simon Willison Hope you enjoy it: http://files.simonwillison.net/2008/xtech-unobtrusive-jquery.pdf