CODEWITHSUNDEEP
javascriptjquery
GeekedOut
GeekedOut

Reputation: 17185

jQuery click not recognized

I have a test page here: http://www.problemio.com/test.php

and if you press "Click To Test Signup" you get a form. If on that form, you click "Log In" it recognizes that you clicked that, and opens the login form.

But the problem is that on the login form, if you press "create profile" it actually goes to the url of the href tag and not to the jQuery click event.

My quetion is what is the best practice of doing this? I hered of something called "prevent default behavior" but not sure how/when it should be used.

I am guessing that if the user has JS disabled, they should still be able to log in. How can I set it up so that users can log in and make accounts in the jQuery way first, and some default way if they have JS disabled?

Thanks!

Upvotes: 2

Views: 216

Answers (3)

kamui
kamui

Reputation: 3419

You can do this with pure jQuery with

 $("#createprofilelink").click(function(event) {
      event.preventDefault();
      {create profile logic}
 });

more details of this can be seen in the jQuery documentation http://api.jquery.com/event.preventDefault/

Edit: I removed this because of @maxedison comment that it stops the jQuery event from firing but I have just tested this and the jQuery event fires but the link does not go to the address.

 <a id="thelink" href="http://www.google.com" onclick="return false;">the link</a>
 <script>
      $('#thelink').click(function(){alert('alert me');});
 </script>

As for the JS being disabled part of the question the link really should point to to a real form to fill in, as Taryn East correctly says, so the user gets the same functionality even if the user experience is lower by not using JavaScript.

You could even go down the noscript route

  <noscript>
        <div>Your user experience would be far improved if you 
        enable JavaScript but if you insist, 
        <a href="{real link}">Click Here to create your profile</a></div>            
  </noscript>

Upvotes: 5

user1231231412
user1231231412

Reputation: 1659

I could not follow the link due to firewall restrictions on my side but...

You'll want to use whats called unobtrusive javascript.

http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

This means if JS is available it will use it, if not continue working as plain html.

using jQuery you would first attach the click event to your button in the $.Ready() method.

<a id='btnTest' href='login.html' />

$(document).ready(function () {
        // Attach click event to btnTest
        $("#btnTest").click(function (e) { 
                          // do logic
return false; // Returning false here will stop the link from following login.html.
});
    });

Hope this helps.

Upvotes: 2

Taryn East
Taryn East

Reputation: 27747

To fix you link-gazumping problem, indeed, as @kamui says, use return false;

But as to your JS-disabled question - point the href at a real URL -> preferably the same URL as your JS-enabled stuff - or the same form, but in a new window.

Upvotes: 4

Related Questions