AJAX / jQuery的锚标签

Question

I am looking to a way to use images as links to new pages inside my web app.

I am using data-file anchor tags to keep the user inside the web app.

<a data-file="salt.html?v=1"><img src="assets/images/template/salt.jpg" width="125" height="125" /> </a>

These tags are inside:

<div class="products_content">

My code looks like this:

$('.products_content a').on('click', function(){  
    $('.products_content a').removeClass('selected');
    $(this).addClass('selected');
    changePage( $(this).attr('data-file') );
});  

Any ideas? I have no idea why it isn't working. I have a similar set up for my navigation and it works fine. My navigation set up is as follows:

<nav>
    <a data-file="home.html?v=1">Home</a>
    <a data-file="about.html?v=1">About Us</a>
    <a data-file="services.html?v=1">Services</a>
    <a data-file="products.html?v=1">Products</a>
</nav>

And:

$('nav a').on('click', function(){
    $('nav a').removeClass('selected');
    $(this).addClass('selected');
    changePage( $(this).attr('data-file') );
});

$('nav a:nth-child(1)').trigger('click');

Any help would be greatly appreciated. I am in over my head.

Answer 1

Works for me in jsFiddle. Are any errors showing up in the console? Is your selector finding the anchors to begin with? Is the click event even getting fired? Is the changePage() method being included in that page somewhere?