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 am using CodeIgniter.

Other php functions are here. (http://pastie.org/798802)

Answer 1

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();
    ...
});