george Posted June 19, 2014 Share Posted June 19, 2014 I have a page with some jQuery on it. In the header, I have <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script><script> $(document).ready(function(e) { $("div.box").each(function ( i) { var div = $(this); setTimeout(function () { div.fadeIn(800); }, i * 800) }); });</script> And within the document body itself I have <script> $("a.imp").click(function(){$(this).parents("div").css('z-index','2')}); </script> Both functions do as I want, but the script that is within the document presents it's result real briefly, and then the automation generated in the header section runs again. How can I make it stop? I want one thing to run on document load, and the other thing to run when the client clicks an anchor tag. But they both run when I click the anchor tag. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 19, 2014 Share Posted June 19, 2014 It might be an issue of event propagation, you would need to stop the event from propagating from the anchor to the div. Link to comment Share on other sites More sharing options...
george Posted June 20, 2014 Author Share Posted June 20, 2014 I have tried chaining a .stop(), a stopPropagation(), and a stopImmediatePropagation() to the end of the in-document code as follows $("a.imp").click(function(){$(this).parents("div").css('z-index','2')}).stopPropagation(); ; None of them stopped the repeating of the animation, which I want to run only on document ready. Link to comment Share on other sites More sharing options...
justsomeguy Posted June 20, 2014 Share Posted June 20, 2014 I don't think that is something you would chain. The event handler is passed an event object, and you stop propagation on the event object. Link to comment Share on other sites More sharing options...
Hadien Posted June 21, 2014 Share Posted June 21, 2014 I think you want to use .parent(), not .parents(). I can't say for sure as I don't know what your html is. as for stopPropagation(). the click handler should pass a single argument and you'll chain stopPropagation() on that. Jquery will pass the event object by default into the handler if said handler accepts a single argument. Refer to it's documentation for an example on it's use. you also might want to look into queuing the animations. since the setTimeouts from the header can easily still be running when the user clicks something. run a search keyword for "queue" or look up some related functions like finish, and see how it meets your needs Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2014 Share Posted June 21, 2014 Wouldn't be more likely that since it is a anchor element, it doing what it is supposed to do and attempt to go to the link in href, so its running the onclick event code, then reloads the page, which causes it to run the onload script. So you have to prevent the default action of the anchor. $("a.imp").click(function(event){event.preventDefault();$(this).parents("div").css('z-index','2');}); I think you have to be more specific ('class') when using parents(), using 'div' depending on html code might be targeting the outermost or all div parent elements of clicked element. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now