CODEWITHSUNDEEP
jquerytogglehref
hyperrjas
hyperrjas

Reputation: 10744

Toggling a class disables my link

I have this jquery:

$(".button").toggle(function() {
$(this).find(".button").addClass('disable');    
},
function(){
$(this).find(".button").removeClass('disable');
});

My html for .button link is:

<a class="button" href="/users/sign_up">

My css disable class:

.disable {
          background: none repeat scroll 0 0 #F2F0F0 !important ;           
          border-color: #D1CDCD;
          color: #D1CDCD !important;    
          cursor:default;   
          text-shadow: 0 -1px rgba(34, 25,25,0.01)!important;                           
          cursor:pointer; box-shadow: none !important;
          }

Why I can not go to /users/sign_up when I click the button? The .disable class is added and working fine but the link isn't taken.

Upvotes: 1

Views: 148

Answers (1)

Andomar
Andomar

Reputation: 238176

Found this in the jQuery documentation:

The implementation also calls .preventDefault() on the event, so links will not be followed and buttons will not be clicked if .toggle() has been called on the element.

It would be easy to open the page manually at the end of your toggle function:

window.location = $(".button").attr('href');

Here's an example in JSFiddle. To get it working, I had to replace $(this).find(".button") with $(".button).

Upvotes: 1

Related Questions