How to execute another action after generated by ajax with jQuery?

Question

I have this ajax function with jquery. (http://pastie.org/798788)

The outputs is the following.

<div class="content">
    <h1>Latest Messages or Task To Do</h1>

    <ul style="display: block;" id="message_ul">
    <li class="86">
<div class="listbox"><span class="user">
<strong>Administrator</strong></span>
<span class="date">2010-01-28 08:57:43</span>
<a href="http://127.0.0.1/ci_backendpro2/index.php/messages/admin/changestatus/86"
class="todo">to do</a>
<span class="msg">Change links in message, to do, completed 
and delete to anchor </span>
</div>
   </li>

<li class="85">
<div class="listbox"><span class="user">
<strong>Administrator</strong></span>
<span class="date">2010-01-28 08:51:15</span>
<a href="http://127.0.0.1/ci_backendpro2/index.php/messages/admin/changestatus/85"
class="todo">to do</a>
<span class="msg"> meta tag keywords and 
description should show from page input/database </span>
</div>
</li>

<li class="84">
...
...

Now I am trying to add another ajax with class="todo". However when I tried this for testing. It does not alert. It executes the php function.

$(".todo").click(function(){
    event.preventDefault();
    alert("hei");

}); 

I am not sure why. Is it because it is created by ajax?

Is it something to do with binding?

How can I make it work?

I thank your help in advance.

Additional info. By the way I am using codeigniter. Other php functions are here. (http://pastie.org/798802)

Answer 1

You'll need to use a live event:

$(".todo").live('click', function() { // <- Extend the "click" event to every .todo element created in the future
    event.preventDefault();
    alert("hei");
}); 

Answer 2

Not sure I entirely understand how everything is going on. But if you're inserting the links with class 'todo' after you've executed the 'bind' function, you either need to: a) Re-call the bind function (first unbinding). b) Use the jquery live function so you automatically attach to any new 'todo' classes.

Answer 3

It looks like you need to be using the live-style event binding and name the event object as a parameter to the click handler.

$(".todo").live('click', function(event) {
    event.preventDefault();
    ...
});