Not sure where to start looking/preventDefault() not preventing.

[delayedinsanity]

jQuery(document).ready(function($) {
$("a#help-button").click(function(e) {
	var spanid = $($(this).attr("href"));
	spanid.slideToggle('slow');
	e.preventDefault();
	return false;
 });
});

 

I'm sure there's probably a better way of doing what I'm doing here, so if you have any tips for that I'm all ears.

 

The problem though is in preventDefault/return false... neither is working (on their own or together as illustrated) to stop the browser from trying to find the named anchor from the A element. So if I have <a href="#keyword" id="help-button">...</a> it appends #keyword to the url... I just want to use the href to find the element it should open, I don't want it to scroll anywhere.

 

[F1Fan]

I don't know about the preventDefault function, but I believe that you cannot put a return in a nested function like that. Try moving it to the outer most function.

[delayedinsanity]

You're fast. The outermost function is just the document ready though... I'm wanting to prevent the action as a result of the click?

[F1Fan]

Have you tried removing the return false and moving the preventDefault to the beginning of that function? The jQuery documentation shows that being the first action. Maybe one of your previous calls are stopping the script from finishing.

 

http://api.jquery.com/event.preventDefault/

[delayedinsanity]

Yeah no I tried that... due to my lack of experience with jQuery/JavaScript I also tried function(e) { e.preventDefault(); and function(event) { event.prevent... as I've seen it said both ways (by people who claim their way is the only way, but thats besides the point).

 

I have a feeling something else is conflicting with it, because I've successfully done this before, but I have no idea what could do that, or how to track it down. I'm an avid Firebug fan but it doesn't show anything in the console about regular calls like this, and I don't know if I can figure out the DOM page.

 

[Ken2k7]

What does e.preventDefault() do? What is e?

[delayedinsanity]

e/event is the event handler for the function being called, such as .submit or .click in this case.

 

.preventDefault() is supposed to prevent the default event from occurring.

 

[Ken2k7]

What if you remove the e? Is that needed? Another way is to specify javascript: void(0); as the href attribute.

[delayedinsanity]

Only problem with that is that I'm using the value of the href to determine what element the toggle should occur on.

 

I think what's wierd is as I mentioned, I've used both of these methods before with absolutely no problem (return false or .preventDefault), it's just in this one case that it's being a buzzard. The other option I'm considering is removing the A element altogether and just making a clickable div.. then I can use the ID of the div to attach the toggle to a span of the same class name.

 

[Ken2k7]

What do you think of this approach:

<a href="javascript: void(0);" id="blah" rel="toggleDiv">...</a>

 

JavaScript:

jQuery(document).ready( function() {
     jQuery("#blah").onclick( function() {
          jQuery("#" + $(this).attr("rel")).slideToggle("slow");
          return false;
     });
});

[delayedinsanity]

That should work quite well actually, it slipped my mind to make use of the rel attribute for this. I'm working on other tickets right now, but once I wrap back around, I'll give that a go.