Making a jQuery selection in IE on html added via .load()

Question

Scenario: I am using jQuery to lazy load some html and change the relative href attributes of all the anchors to absolute links.

The loading function adds the html in all browsers.

The url rewrite function works on the original DOM in all browsers.

But

In IE7, IE8 I can't run that same function on the new lazy loaded html in the DOM.

//lazy load a part of a file
$(document).ready(function() {
   $('#tab1-cont')
       .load('/web_Content.htm #tab1-cont');
   return false;
});
//convert relative links to absolute links
$("#tab1-cont a[href^=/]").each(function() {
    var hrefValue = $(this).attr("href");
    $(this)
       .attr("href", "http://www.web.org" + hrefValue)
       .css('border', 'solid 1px green');
    return false;
});

I think my question is: whats the trick to getting IE to make selections on DOM that is lazy loaded with jQuery?

This is my first post. Be gentle :-)

Thanks,

Joel

Answer 1

Hve you tried using your conversion logic as the call back for load?

$(document).ready(function() {
   $('#tab1-cont')
       .load('/HeritageFoundation_Content.htm #tab1-cont', function(html){
          $('a[href^=/]', html).each(function(){
            var hrefValue = $(this).attr("href");
            $(this)
              .attr("href", "http://www.heritage.org" + hrefValue)
              .css('border', 'solid 1px green');
            return false;
          });
   });
   return false;
});

Answer 2

You can either run jQuery on the text after you've loaded it from ajax, before you insert it into the DOM, or you can use the live or delegate functions and selectors to watch for events on dynamically loaded content.

Answer 3

If you have ever wanted to lazy load some HTML using jquery .load() you need to know that IE and FF don't treat relative HREFs the same way. IE adds a ghost domain to the relative URL (to the lazy loaded html).

As a result, if you load a DIV of content full of HREFs you cannot count on using $(a[href^=/]) to find all relative HREFs. IE won't have any.

So I wrote this:

(Bear with me, I'm a CSS guy who does some jQuery. I know this could be written MUCH more elegantly. Could someone help me out with that?)

$('.footer-wrap').ready(function() {
    $('.tab1-cont').load('/web_Content.htm .tab1-cont');
    return false;
});
$(".footer-wrap").hover(function() {
    //Step 1
    //IE seems to add a ghost domain to lazy loaded html.  In my case, "site.heritage" is the domain, so IE added to lazy loaded href URL.
    //So I sniff for "site" in the URL
    $(".footer-wrap a[href*=site]")
    //on all results
    .each(function() {
        //clean up the ghost domain by getting the href and replacing "http://site.web.org" with nothing
        var hrefValue = $(this).attr("href").replace('http://site1.web.org', '').replace('http://site2.web.org', '').replace('http://site.web.org', '');
        //add the proper domain to the clean relative href URL
        $(this).attr("href", "http://www.web.org" + hrefValue);
    });
    //Step 2
    //FF just needs this to make a relative url into an absolute URL because it treats lazy loaded html like regular html.
    $(".footer-wrap a[href^=/]")
    .each(function() {
        var hrefValue = $(this).attr("href");
        $(this).attr("href", "http://www.web.org" + hrefValue);
    });
});

Perhaps lazy loaded HREFs in IE don't act this way for all people all the time... and I just found some niche circumstance. I don't know. Hopefully this HREF post will save someone some time.