IE Dialog not firing the first time

IE Dialog not firing the first time

I'm having a strange issue with using the Dialog UI in IE.  I have click handlers set up for imgs on a page that utilize Dialog to display the full size image when they are clicked. So, I use a placeholder div at the bottom of the page that gets updated with the img src and then .dialog() is called on that div. 

Everything works fine in FF, Chrome, Safari, but in IE it seems that on the first click, the placeholder div updates, but no dialog.  Subsequent clicks fire the dialog, but then the title for the dialog, which is pulled from the img alt attribute is always one image behind (i.e. it displays the alt info from the last image clicked, not the current image).

This is the relevant javascript:

  2. $(function () {
  3. $('.imgGallery a').click(function (e) {
  4. e.preventDefault();
  5. previewImage($(this).attr('href'), $("img", this).attr('alt'));
  6. });
  7. $('.imgGallery').each(function (e) {
  8. $(this).hover( 
  9. function() {
  10. $(this).css('border','2px solid #E49C16').css('cursor','pointer'); },
  11. function() {
  12. $(this).css('border','2px solid #F5F2EB');  
  13. });
  14. });
  15. });
  17. function previewImage(uri, title) {
  19.  //Get the HTML Elements
  20.  imageDialog = $('#imgPopUp');
  21.  imageTag = $('#image');
  22.  
  23.  //Set the image src
  24.  imageTag.attr('src', uri);
  25.  
  26.  //When the image has loaded, display the dialog
  27.  imageTag.load(function(){
  29. $('#imgPopUp').dialog({
  30.  position: 'center',
  31.  modal: false,
  32.  resizable: false,
  33.  draggable: true,
  34.  width: 'auto',
  35.  title: title
  36. });
  37.  });   
  38. }
I've put a basic, stripped down version here, to view the behavior:  Dialog Test

Any help on this is greatly appreciated!  Thanks!

--Tor