Jump to content

Recommended Posts

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.

 

 

Share this post


Link to post
Share on other sites

It might be an issue of event propagation, you would need to stop the event from propagating from the anchor to the div.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.




			
		

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...