Hi list,
I'm trying to add items to an unordered list using jQuery. This is
something triggered by another event, so it cannot be done within my
HTML templating engine whilst building the page.
I also wish to add an 'a' element within the list item which I can
then use to remove the item and post an AJAX request at a later point.
I had come up with the following with some assistance on #jquery:
$(
"<li style=\"display: none\">"+
"["+task.client.code+"] "+task.project.name+
"<br/>"+task.name+"<br/>"+
"<a class='removeTask' href='#'>Remove</a>"+
"</li>"
).find("a.removeTask").bind('click', {taskid:
task.id}, remove_task
).end().appendTo("#actSessionList");
My understanding is that this should: build the HTML, find any
elements matching 'a.removeTask' within that HTML and bind them to
remove_task() passing taskid within event.data and then add the
initial HTML to my unordered list (#actSessionList).
This seems to work fine when I call it the first time, but for any
subsequent calls (with new data in the 'task' variable),
the .bind(...) call overwrites the binding of the previous items and
causes all their 'Remove' links to call remove_task with the wrong
value of task.id.
Is this incorrect behavior for the code I've written or am I not
grasping the concept completely? My initial thought is that I'm not
being explicit enough when selecting the 'a' element to _only_ receive
the single element within that list item, but I'm too new to
JavaScript to know how to debug this.
Any help or comments are much appreciated.
Regards,
Tom
