Question

Not sure how to phrase this question exactly, but I’ll give it a shot. (If you have a suggestion for how to phrase it better so others can find it, tell me and I’ll edit it).

I want to know the best practices for handling clicks on a page that are then processed using AJAX. I have been temporarily using code that looks like this in the HTML:

<a href="#clickable">Click me!</a>

And in jQuery I handle the clicks by binding click to the href.

Of course, I know that you should not be making this known to the user.

So how should I be handling these clicks?

Answer 1

You should make your HTML so that it works if Javascript is off. Don’t mix content with functionality, so inline Javascript is usually not a good solution.

So, in your case:

<a href="some/working/path.php" class="ajax">Meaningful description!</a>

Then you can add a class (or check the text inside, or something else) to handle it on the Javascript side.

Make sure to use event.preventDefault() to stop the page from changing if Javascript is enabled.

So the jQuery would be

  // Target only anchors with class "ajax"
$("a.ajax").click(function(event) { 

    // Handle AJAX etc here.
    // ...

    event.preventDefault(); // <== Don't navigate away from page
});