I am populating an unordered list with items from an ajax query, after which
I want to attach click events to each list item. Using either load or
$.get I'm able to retrieve the data and post it to the UL correctly.
However, when I then try to immediately retrieve all the list items in that
newly populated UL, I get zero items returned and thus can't attach click
events to them. The UL is not actually being populated until after all of
the scripting runs. If I then rerun the operation I can retreive the items
in the list from the first ajax query, but this is too late because the list
is out of date and does not reflect the new data retrieved from the second
query. So, obviously I don't understand something about the basic order of
operations here.
function populateCategories() {
//This loads the categories UL. Once the script runs the items are
listed correctly.
$("#categories").load(
http://localhost/my_account/return_categories.php);
//But when I try to immediately retreive the list items from that UL
before scripting has run it's course, the items are not available.
//This returns a count of zero items in the list.
var count = $("categories li").size();
alert(count);
}
What can I do to get that list of items and attach click events to them
immediately after the load has returned data and I've populated the UL? Is
there a different way to approach this? The point of this is to be able to
click a button to create a new item, have that written to the database,
update the list of items to reflect the addition, and then attach a click
event to the list items allowing the user to select and edit the items.
Is there a way to attach events to any list item in the UL without having to
explicitly apply it to each item?
