funny behavior with loading multiple elements using ajax
so i have an ajax script which connects to the server and retrieves a list of items. each item is converted into a draggable with a div id and a span within the draggable. the title tag of the span contains the text of the item.
i am trying to print out the text for each item as it is retrieved from the database in the ajax call by retrieving the title tag of the span element within the div element. the funny behavior is that only the text of the first item is retrieved properly and the text for subsequent items in "undefined". if i simply output the text via calling the data retrieved by the ajax call, everything works. it is just that when i access the title tag of the span element for every item that only the first item text is shown properly.
here is the relevant code:
-
ajax call...
success function
for each item retrieved
$('#task-'+task['id']).attr({'class': 'ui-widget-content'}).html("<span id='name' title='"+task['name']+"'>"+task['name']+"</span><br><br>");
alert($('#task-'+task['id']+' span#name').attr("title");
alert(task['name'])
the above code shows the right alerts with the right text for only the FIRST item (so the code works). for subsequent items that are retrieved, the first alert shows null... but the second alert which is supposed to simply output the data received from the ajax call shows the right data!
this is very perplexing and i haven't been able to figure out what is going on. any help would be greatly appreciated!
thanks!