Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unobtrusive javascript with jquery - good 10 minute tutorial?

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!

like image 940
Micah Avatar asked Nov 03 '08 19:11

Micah


1 Answers

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>
like image 193
Damir Zekić Avatar answered Sep 17 '22 15:09

Damir Zekić