delayedinsanity Posted April 26, 2010 Share Posted April 26, 2010 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. Quote Link to comment Share on other sites More sharing options...
F1Fan Posted April 26, 2010 Share Posted April 26, 2010 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. Quote Link to comment Share on other sites More sharing options...
delayedinsanity Posted April 26, 2010 Author Share Posted April 26, 2010 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? Quote Link to comment Share on other sites More sharing options...
F1Fan Posted April 26, 2010 Share Posted April 26, 2010 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/ Quote Link to comment Share on other sites More sharing options...
delayedinsanity Posted April 26, 2010 Author Share Posted April 26, 2010 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. Quote Link to comment Share on other sites More sharing options...
Ken2k7 Posted April 28, 2010 Share Posted April 28, 2010 What does e.preventDefault() do? What is e? Quote Link to comment Share on other sites More sharing options...
delayedinsanity Posted April 28, 2010 Author Share Posted April 28, 2010 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. Quote Link to comment Share on other sites More sharing options...
Ken2k7 Posted April 28, 2010 Share Posted April 28, 2010 What if you remove the e? Is that needed? Another way is to specify javascript: void(0); as the href attribute. Quote Link to comment Share on other sites More sharing options...
delayedinsanity Posted April 28, 2010 Author Share Posted April 28, 2010 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. Quote Link to comment Share on other sites More sharing options...
Ken2k7 Posted April 28, 2010 Share Posted April 28, 2010 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; }); }); Quote Link to comment Share on other sites More sharing options...
delayedinsanity Posted April 28, 2010 Author Share Posted April 28, 2010 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.