CODEWITHSUNDEEP
javascriptjqueryajax
maddogandnoriko
maddogandnoriko

Reputation: 1002

Ajax inserted content not accessible in DOM

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

Upvotes: 2

Views: 363

Answers (2)

maddogandnoriko
maddogandnoriko

Reputation: 1002

Thank you Dimitry, you solution basically worked. I finally used:

$('#categoryListing').load('../common.html #categoryLinksUL', function() {
  $('#categoryListing li a').each(function () {
    var hashPos=this.href.indexOf("#");
    var tCategory = this.href.substr(hashPos+1,this.href.length );
  });
});

So why did jQuery recognize categoryListing there? I tried moving the each function outside of the load function and categoryListing did not contain any links. Is it because maybe the load was not completed when it tried to get categoryListing links? Seems like that is possible.

Thanks, Todd

Upvotes: 0

Dimitry
Dimitry

Reputation: 6603

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.

Upvotes: 6

Related Questions