Login/Register
Unobtrusive javascript with jquery - good 10 minute tutorial?
Asked Answered
Solved javascriptjqueryhtmlunobtrusive-javascript
S

1

13

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!

Supersensitive answered 3/11, 2008 at 19:12 Comment(3)
looks like a whole slew of them here: docs.jquery.com/Tutorials – Elisaelisabet
I recently found a nice article on non obtrusive javascript with jQuery by Simon Willison. – Corregidor
Try this: railscasts.com/episodes/205-unobtrusive-javascript – Yser
G
10

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>
Garaway answered 3/11, 2008 at 19:22 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.