Skip to main content

JQuery selectors and future elements

I am using JQuery for the AJAX and dynamic aspects of my web based learning platform.

I like the fact that JQuery allows us to use CSS type selectors to select elements on the page to either manipulate them, add event handlers, or a host of other things.

So, the code below intercepts clicks on all links and dynamically adds a new link when a link is clicked.


<html>
<head>
<link rel="stylesheet" type="text/css" href="/site-media/al/style.css" />
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
</head>

<body>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("ul#questions").append("<li><a href='#'>click me</a></li>");
});
});
</script>
<div>
<ul id="questions">
<li><a href="#">Click Me: 0</a></li>
</ul>
</div>
<textarea style="Width: 400px; Height: 200px" name="textarea" cols=20>
<head>


There is a problem with this code. Everytime you click on the link called "Click Me: 0" a new link is added, but if you click on the new link, then nothing happens. So, why does JQuery not work with dynamically added elements?

The reason is because the following call


$("a").click(function() {
//...
});


only binds to the anchor elements present on the webpage when the $(document).ready() function is called. It will not bind to future elements. To bind to future elements as well, we have to use the live() function.

Try using this code to bind to the "a" elements and it will work.

$("a").live("click", function() {
$("div#questions").append("click me");
});

Comments

Thanks. This was useful.

Popular posts from this blog

Fuctional Programming Principles in Scala - Getting Started

Sometime back I registered for the Functional Programming Principles in Scala , on Coursera. I have been meaning to learn Scala from a while, but have been putting it on the back burner because of other commitments. But  when I saw this course being offered by Martin Odersky, on Coursera , I just had to enroll in it. This course is a 7 week course. I will blog my learning experience and notes here for the next seven weeks (well actually six, since the course started on Sept 18th). The first step was to install the required tools: JDK - Since this is my work machine, I already have a couple of JDK's installed SBT - SBT is the Scala Build Tool. Even though I have not looked into it in detail, it seems like a replacement for Maven. I am sure we will use it for several things, however upto now I only know about two uses for it - to submit assignments (which must be a feature added by the course team), and to start the Scala console. Installed sbt from here , and added the path

Five Reasons Why Your Product Needs an Awesome User Guide

Photo Credit: Peter Merholz ( Creative Commons 2.0 SA License ) A user guide is essentially a book-length document containing instructions for installing, using or troubleshooting a hardware or software product. A user guide can be very brief - for example, only 10 or 20 pages or it can be a full-length book of 200 pages or more. -- prismnet.com As engineers, we give a lot of importance to product design, architecture, code quality, and UX. However, when it comes to the user manual, we often only manage to pay lip service. This is not good. A usable manual is as important as usable software because it is the first line of help for the user and the first line of customer service for the organization. Any organization that prides itself on great customer service must have an awesome user manual for the product. In the spirit of listicles - here are at least five reasons why you should have an awesome user manual! Enhance User Satisfaction In my fourteen years as a

Inheritance vs. composition depending on how much is same and how much differs

I am reading the excellent Django book right now. In the 4th chapter on Django templates , there is an example of includes and inheritance in Django templates. Without going into details about Django templates, the include is very similar to composition where we can include the text of another template for evaluation. Inheritance in Django templates works in a way similar to object inheritance. Django templates can specify certain blocks which can be redefined in subtemplates. The subtemplates use the rest of the parent template as is. Now we have all learned that inheritance is used when we have a is-a relationship between classes, and composition is used when we have a contains-a relationship. This is absolutely right, but while reading about Django templates, I just realized another pattern in these relationships. This is really simple and perhaps many of you may have already have had this insight... We use inheritance when we want to allow reuse of the bulk of one object in other