jquery tabs not firing after content loaded via ajax -

i have index page, in wich have jquery.js , jquery.tabs.js included. page load content via ajax . content set of tabs, contents , @ bottom of loaded content have call tabs(). in ff works when load content after refreshing index page, , if hit link reload content, stops working. in ie it's not working @ all.

these tabs:

<ul id="horz-tabs">  <li><a href="#tab1">tab1</a></li>  <li><a href="#tab2">tab2</a></li>  <li><a href="#tab3">tab3</a></li> </ul> 

then have containers following, , @ end of page loaded via ajax have:

<script type="text/javascript"><!--  $('#horz-tabs a').tabs();  //--></script> 

my ajax function loads page properly. wondering how can fix issue. or advice.

the ajax loading function follow

<script>      function async(target, href) {               var loading = '<div class="loading">loading</div>';         jquery.ajax({         url: href,         beforesend: function() {             $(target).prepend(loading);         },         error: function() {             $(target).html("<span class='error'>failed</span>");         },          success: function(results) {             $(target).html(results);         }     }) }  </script 

look loading tab html via ajax, problem since when script running dom tab elements may not existing.

so need have success callback async load method , add execute $('#horz-tabs a').tabs(); in load success callback.

function async(target, href) {     var loading = '<div class="loading">loading</div>';     return jquery.ajax({         url : href,         beforesend : function() {             $(target).prepend(loading);         },         error : function() {             $(target).html("<span class='error'>failed</span>");         },          success : function(results) {             $(target).html(results);         }     }); } 

then

async('some-div', 'tab-url').done(function(){     $('#horz-tabs a').tabs();  })