change html of div

[droidus]

I am trying to change the content of divs, but it seems like after i click the first time, it won't let me change anything else after that. so i will click a link, it will go bold, but then when i try to click another, nothing happens. here is my code:

$('#allNav').click(function() {
		$("#navPane").html("<li><div id='allNav'><strong><a href='#'>All</a></strong></div></li><li><div id='photoNav'><a href='#'>Photos</a></div></li><li><div id='docsNav'><a href='#'>Documents</a></div></li></ul> ");
	});
	$('#photoNav').click(function() {
		$("#allTitle").html("Photos");
		$("#navPane").html("<li><div id='allNav'><a href='#'>All</a></div></li><li><div id='photoNav'><strong><a href='#'>Photos</a></strong></div></li><li><div id='docsNav'><a href='#'>Documents</a></div></li></ul> ");
	});
	
	$('#docsNav').click(function() {
		$("#allTitle").html("Documents");
		$("#navPane").html("<li><div id='allNav'><a href='#'>All</a></div></li><li><div id='photoNav'><a href='#'>Photos</a></div></li><li><div id='docsNav'><strong><a href='#'>Documents</a></strong></div></li></ul> ");
	});

<div id="navPane">
<li><div id="allNav"><strong><a href="#">~All</a></strong></div></li>
<li><div id="photoNav"><a href="#">Photos</a></div></li>
<li><div id="docsNav"><a href="#">Documents</a></div></li>
</div>

[Nemesis02]

The reason that's happening is because you're removing the link which you had the event attached to. when you remove that anchor link, you remove the event as well and you have to reattach it.

[droidus]

I am not sure what you mean. I am replacing the text inside the div with exactly was in there before.

[Nemesis02]

That doesn't really matter if it's the same or not, think of it this way, easy tag is unique and when you attach an event, you attach it to the tag, you remove that tag you remove everything associated with, including events whether you replaced it with the same text or not. What you'll have to do is store that function to a variable, attach the function by variable name, that at the end of that function, run that same command to attach the event again.

[droidus]

I am still not sure what you mean. i have the tag, <div id="navPane">. this holds the event. that should not change. only what inside should. would you possibly be able to show me with my code, or a short example?

[Nemesis02]

You should look carefully at your code, you attached your event to allnav which is inside navpane, when you do $("#navpane").html you basically emptied out the contents of the tag, events included and replaced it with what you passed to the html function.

[droidus]

so I am basically loosing the attached events with <div id='allNav'>? i guess I am confused, because I don't see the event that is physically attached. i understand that the event is when you click on it, but it should not get overridden, since each link is defined separately. and those links exist in each of the new htmls that are produced.

[Nemesis02]

Yes, you lost the event cause the original element it was attached to was replaced when you did the html call so you'll have to re-register the event with that element. There is no to physically see that you have an event attached to an element, it's more or less registered with the browser itself, is up to you to know that an event should be attached to it since you coded it. If an event is not triggering like it should, it's an indication that the event somehow was unregistered, and you happen to do that when you removed allnav and added it again.

[xelawho]

... but if you just want to turn a link bold when you click it, aren't you better off doing that with css?

[Nemesis02]

... but if you just want to turn a link bold when you click it, aren't you better off doing that with css?

Yes. Make make a class called bolded with the style font-weight: bold; and then use addClass removeClass to add the bolded class to the text.

[xelawho]

or just make a visited pseudo class for the relevant links - no js/jQ required...

[droidus]

it's not only that that i'm changing, but it's also some more content of the page.