Question

I’ve gotten my wordpress theme to load page content using ajax. The only issue I’m running into is if I want to control what links to load content with. The simplest way I can think of doing this is by using classes on my tags.

I can limit what links activate ajax by using a :not

$(document).on("click", "a[href^='"+siteUrl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/']):not('nonajaxlink')", function() {
    location.hash = this.pathname;
    return false;
});

But if I went with this method I would have to give ALL links not being used with ajax a special class.

I’ve also tried this:

$('.ajaxlink').click(function(){
    $(document).on("click", "a[href^='"+siteUrl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/'])", function() {
        location.hash = this.pathname;
        return false;
    });
});

But the ajax seems to ignore the click function and just does it anyway.

Is there a way where I can only select certain links to use my ajax? Thanks in advance!

Answer 1

Try this one:

$(document).on("click", "a[href^='"+siteUrl+"']:not([href*='/wp-admin/']):not([href*='/wp-login.php']):not([href$='/feed/']).ajaxlink", function() {
    location.hash = this.pathname;
    return false;
});

With this, you set the selector to only those that have the class ajaxLink.