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?