Jquery loading content via ajax

Question

I have an unordered list that will be used as a nav bar

<ul>
            <li><a href="content/index.html" class="selected">Home</a></li>
            <li><a href="content/about.html" class="nav_bubble">About</a></li>
            <li><a href="content/projects.html" class="nav_bubble">Projects</a></li>
            <li><a href="content/tutorials.html" class="nav_bubble">Tutorials</a></li>
</ul>

and I have some javascript to load the content into a div

<script type="text/javascript">
        $(function(){
            $("div#navcontainer > ul > li > a").click(function(e){
                e.preventDefault();
                $.ajax({
                    url: e.currentTarget.href,
                    cache: false,
                    dataType: "html",
                    success: function(data) {
                        console.log(data);
                        $("#content").html(data);
                    }
                });
            });
        });
    </script>

All of that works, the question is, what happens when I load a page from my content folder that has a link in it? It sends your browser to the page instead of loading it into the div. How can I recursivly load all links into the content div instead of sending the user directly to them?

it is unclear to me . can you provide your html code

Kanishka Panamaldeniya
– Kanishka Panamaldeniya

2011-07-03 06:15:13 +00:00
Commented Jul 3, 2011 at 6:15 — Kanishka Panamaldeniya
– Kanishka Panamaldeniya, Commented Jul 3, 2011 at 6:15

SeanCannon · Accepted Answer · 2011-07-03 06:25:22Z

1

Change:

$("div#navcontainer > ul > li > a").click(function(e){

To:

$("div#navcontainer > ul > li > a, div#content a").live('click',function(e){

"Attach a handler to the event for all elements which match the current selector, now and in the future."

edited Jul 3, 2011 at 6:25

answered Jul 3, 2011 at 5:43

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

giodamelio Over a year ago

That did not seem to make a difference.

SeanCannon Over a year ago

Did you try adding return false; to the end of your click listener?

SeanCannon Over a year ago

Ah I completely misread your question. Long day. You'll need to add a live to the content div as well: $("div#content a").live('click',function(e){ /*load ajax into content div */...

SeanCannon Over a year ago

You could combine the listeners: $("div#navcontainer > ul > li > a, div#content a").live('click',function(e){ ...

Collectives™ on Stack Overflow

Jquery loading content via ajax

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related