Question

I have an html that has a link:

<a id="myLink" href="/aa.html" title="New Bangoo" class="bangoo">Bangoo</a>

and I include a js file that has this lines:

$("#myLink").live('click', function() { 
var typi = 'Ginga';       
    $("#typeList").append('<option>' + typi + '</option>');        
});

aa.html has that:

<label for="typeList">Type</label>
<div>
   <select id="typeList"></select>
</div>

aa.html opens on a colorbox. Everything is OK but I can not append types to select list. It has no elements when it finishes to open. It used to work but now not working. It may be because of js file tries to append to list before html loads?

Any ideas?

EDIT:

When I do that it works:

$("#myLink").live('click', function() { 
alert('Wait Here!');
var typi = 'Ginga';       
    $("#typeList").append('<option>' + typi + '</option>');        
});

When I alert anything it waits and at this time it has enough time to append to select list. How can I sure that external link has loaded so I can start to append?

PS: My problem is that I am trying to append an HTML element that I load it after I click myLink. aa.html doesn’t place at dom at the beginning, I load it from an external source.

After external page loads at screen it has no elements at select list. When I try to run same code from Firebug it adds options to select list and works. It means that code works but there is a timing and asynchronism problem that I want to append elements to a select list before it locates at dom tree. I should wait loading it and after that run my code.

Answer 1

I solved my problem. colorbox plugin has a function onComplete so I used that function to be sure page loaded.