Question

I built a pretty basic dynamic AJAX function to load in content onto the current page using jQuery.

I tested it on a pretty generic page and got it working without a hitch, however as soon as I put this code into the actual production site I wanted it for it just doesn’t work.

I’ve tried every which way to get this to work, so I’m not sure what else to do now. I have a niggling feeling that I’ve used the wrong selectors in the production site. Although that is probably just from a lack of confidence (beginner) I actually think that the jQuery just isn’t working at all.

Here’s the code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script> $(document).ready(function(){
        var a = $('article.announce');
        var s = $('#info li a');
        // You only need to change the above two pieces of code.    

            s.click(function(){
                var url = $(this).html(),
                    clicked = $(this).attr('data-id');



                    $(s+'[data-id='+clicked+']').click(function(){
                        a.load(url+'.html')


                    }); 
}); 
});</script>

The HTML I’m trying to target is as follows:

    <aside id="info" class="clearfix">
<h1>About Us &gt;</h1>
<h2>Other Stuff:</h2>
<ul>
    <li><a href="#" data-id="1">About</a></li>
    <li><a href="#" data-id="2">Contact</a></li>
    <li><a href="#" data-id="3">Examples</a></li>

</ul>



</aside>
<article class="announce">
<p>Text to be replaced will be here!</p>




</article>

Hopefully I’ve given you enough information to see what’s wrong here. Thanks.

Answer 1

Change the HTML markup:

<aside id="info" class="clearfix">
    <h1>About Us &gt;</h1>
    <h2>Other Stuff:</h2>
    <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="example.html">Examples</a></li>
    </ul>
</aside>

<article class="announce">
    <p>Text to be replaced will be here!</p>
</article>

Then do this:

$(function() {
    var a = $('.announce');
    $('#info li a').on('click', function(e) {
        e.preventDefault();
        a.load($(this).attr('href'));
    });
});