Question

I am working on a pure jquery/js site, mostly to practice some jquery. I am using a load statement to load a menu from a file of common html, like so:

$('#categoryListing').load('../common.html #categoryLinksUL');

which loads:

<ul id="categoryLinksUL">
          <li><a href="#anklets" rel="ajax">Anklets</a></li>
          <li><a href="#bracelets" rel="ajax">Bracelets</a></li>
</ul>

The problem is where I am using it now I need to alter the href of the above links, but they are not part of the dom. In previous instances I was able to use .live(click… But not here. Is there a way I can accomplish this?

Specifically I need to load the links and change the href from #anklets to ?category=anklets

Answer 1

What about the following?

$('#categoryListing').load('../common.html #categoryLinksUL', function() {
    $('li a[href^="#"']').each(function () {
        this.href = '?category=' + this.href.substr(1);
    });
});

In my example, after the load is completed, the anonymous function is called. It takes every anchor with a hash HREF and replaces it with an HREF based on your description.